Web Calculator

832102127章汉林

已于 2023-10-07 22:20:42 修改

阅读量59

点赞数

文章标签：笔记

于 2023-10-07 22:18:04 首次发布

本文链接：https://blog.csdn.net/m0_64256512/article/details/133653355

版权

文章目录

Catalogue
1. Description
2. Work Procedure
3. Personal Software Process (PSP) Form
4. Problem-solving Ideas
5. Design and Implementation Process
- Design process
- Implementation Process
6. Code Description
7. Result Displaying and Text Description
8. Summary

Catalogue

The Link My Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link My Class	https://bbs.csdn.net/topics/617332156
The Aim of This Assignment	Create a calculator with a visual interface and write a blog to record your work content and process.
MU STU ID and FZU STU ID	21124558 and 832102127

1. Description

Task

· Create a calculator with a visual interface.
· Write a blog to record your work content and process.

Program Requirements

· Basic requirement: Implement addition, subtraction, multiplication, division, and clear functions.
· Advanced requirement: Implement functionality for exponentiation, trigonometric functions, and more.
· Before tackling the more complex requirements, you must fulfill the basic requirements.

Coding Requirements

· Use any of C++, Java, Python or other language you prefer to complete the work.
· Develop appropriate code specifications and conduct tests.
· Use Git for version control.

Blog Requirements

· Give the PSP form for this work.
· Description of problem-solving ideas. This is the process of how to think and how to find information after getting the title at the beginning.
· Design and implementation process. The design includes how the code is organized and the flow chart of the key functions.
· Code description. Show the key code of the project and explain the idea.
· Displaying result functions with screenshots ((or gifs) and text descriptions.
· Summarize this assignment.

2. Work Procedure

· Create a GitHub repository for the job.
· Write the program and commit actively.
· Iteratively update and optimize the code.
· Complete your work and write a blog.

3. Personal Software Process (PSP) Form

Personal Software Process Stages	Estimated Time（/minutes）	Actual Time（/minutes）
Planning	60	50
Estimate	50	50
Analysis	40	40
Design Specification	60	50
Design Review	50	50
Coding Standard	40	50
Design	40	50
Coding	50	50
Code Review	30	40
Test	50	50
Reporting	60	50
Test Report	50	50
Size Measurement	30	40
Postmortem & Process Improvement Plan	30	50
Sum	640	670

4. Problem-solving Ideas

In this assignment, we are asked to make a simple web calculator. This assignment needs to design the front end of the calculator to visualize it. Here are three ways to achieve it:

HTML: a language used to describe the web page, responsible for the architecture of the web page
CSS: a language used to lay out color, text content of the web page, responsible for the style of the web page, beautification
JS: a language that runs on the client side and is responsible for the behavior of web pages

The way I use to solve the problem is to use programming software to write HTML. At last, successfully realize the functions of a simple web calculator.

5. Design and Implementation Process

Design process

A basic calculator should include:
Numbers: integers from 0 to 9
Operators: the basic four operations addition, subtraction, multiplication and division
Function: empty, backspace, parentheses, equal functions

It should be noticed that the Advanced requirement: Trigonometric function and exponentiation are also performed in my project.

Implementation Process

Adjust the size of the calculator panel and the size of the button. Select text styles to modify.
If a number (0,1,2,3,4,5,6,7,8,9) and “(”, “)”, “.” is clicked, it will be displayed in the input text box above.
If an operator button (such as +, -, *, /, sin, cos, tan, e^x) is clicked, it will perform related operations and output results.
If the key “C” is clicked, the string content is cleared, and the output box is also cleared.
If you click “=”, the result of the calculation is displayed in the output box and the content is cleared.

6. Code Description

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <style>
        .title-button {
            width: 250px; /* 设置按钮宽度 */
            height: 30px; /* 设置按钮高度 */
            font-size: 20px; /* 设置按钮文本字体大小 */
            margin: 5px; /* 设置按钮之间的间距 */
        }
        /* 定义按钮的样式 */
        .calculator-button {
            width: 60px; /* 设置按钮宽度 */
            height: 60px; /* 设置按钮高度 */
            font-size: 20px; /* 设置按钮文本字体大小 */
            margin: 5px; /* 设置按钮之间的间距 */
        }
         .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* 100%视口高度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Calculator</h1>
        <form name="Calculator">
            <input type="text" class="title-button"name="display" id="display" disabled>
            <br>
            <input type="button"class="calculator-button" value="sin" onclick="fSin()">
            <input type="button" class="calculator-button" value="cos" onclick="fCos()">
            <input type="button" class="calculator-button" value="tan" onclick="fTan()">
            <input type="button" class="calculator-button" value="exp" onclick="fExp()">  
            <br>
            <input type="button" class="calculator-button" value="7" onclick="addToDisplay('7')">
            <input type="button" class="calculator-button" value="8" onclick="addToDisplay('8')">
            <input type="button" class="calculator-button" value="9" onclick="addToDisplay('9')">
            <input type="button" class="calculator-button" value="/" onclick="addToDisplay('/')">
            <br>
            <input type="button" class="calculator-button" value="4" onclick="addToDisplay('4')">
            <input type="button" class="calculator-button" value="5" onclick="addToDisplay('5')">
            <input type="button" class="calculator-button" value="6" onclick="addToDisplay('6')">
            <input type="button" class="calculator-button" value="*" onclick="addToDisplay('*')">
            <br>
            <input type="button" class="calculator-button" value="1" onclick="addToDisplay('1')">
            <input type="button" class="calculator-button" value="2" onclick="addToDisplay('2')">
            <input type="button" class="calculator-button" value="3" onclick="addToDisplay('3')">
            <input type="button" class="calculator-button" value="-" onclick="addToDisplay('-')">
            <br>
            <input type="button" class="calculator-button" value="C" onclick="clearDisplay()">
            <input type="button" class="calculator-button" value="0" onclick="addToDisplay('0')">
            <input type="button" class="calculator-button" value="=" onclick="calculate()">
            <input type="button" class="calculator-button" value="+" onclick="addToDisplay('+')">
        </form>

        <script>
            function addToDisplay(value) {
                document.Calculator.display.value += value;
            }

            function clearDisplay() {
                document.Calculator.display.value = '';
            }

           function fSin() {
                
                const input = document.Calculator.display.value;
                const angle = parseFloat(input);
                const result = Math.sin(angle * (Math.PI / 180)); // 将角度转换为弧度
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
           function fCos() {
                const input = document.Calculator.display.value;
                const angle = parseFloat(input);
                const result = Math.cos(angle * (Math.PI / 180)); // 将角度转换为弧度
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
            function fTan() {
                const input = document.Calculator.display.value;
                const angle = parseFloat(input);
                if (input == 90|| input == 270||input == -90||input == -270){
	                document.Calculator.display.value = "Error!"
	                return
                }
                const result = Math.tan(angle * (Math.PI / 180)); // 将角度转换为弧度
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
           function fExp() {
                const input = document.Calculator.display.value;
                const exponent= parseFloat(input);
                const result = Math.exp(exponent); 
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
            function calculate() {
                try {
                    const result = eval(document.Calculator.display.value);
 	    document.Calculator.display.value = result;
	    if (isNaN(result) || !isFinite(result)) {
                        throw new Error("error");
                }
                }catch(err) {
                    document.Calculator.display.value = 'Error!';
                }
            }
        </script>
    </div>
</body>
</html>

First, I use < head > part to define the style and the size of the interface. In the < body > part, also define the button and connect them to the function constructed blow in logic. At the same time, make it possible to display in the screen.

Then for function part, I just import the Math () function to achieve the exponentiation and trigonometric operations. For basic calculation like plus or minus, it can be achieved by its original library.

7. Result Displaying and Text Description

Demo for calculator

In the demo above, I test each key and do some related operations. Simple computing tasks like plus or minus are achieved easily. in addition, I just consider some other special cases such as numbers over zero and tan45degree should be set to “Error!”. Blessly, all the functions do well in each calculation. By Importing the Math() library, successfully solve out the trigonometric functions and exponential functions. In the following works, I can pay more attention to the more complex computation.

8. Summary

To achieve a simple version of the web calculator, I just apply the HTML codes to construct the website. By adjust the interface to be more twinkle, I modify the head of the html codes like size and distance between them. Using CSDN to blog in order to record the development, I learn the complete progresses to create and achieve my own project.