A calculator based on HTML/CSS/JS

[--))))]

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617332156
The Link of GitHub of This Assignment	https://github.com/832102123/Calculator
The Aim of This Assignment	Create a webpage that can perform basic calculator functions.
MU STU ID and FZU STU ID	21126208_832102123

catalogue

• Introduction
• 1. PSP Form
• 2. Problem-Solving Ideas
• 2.1 how to think
• 2.2 how to find information
• 3. Design and Implementation Process
• 3.1 code organization and implementation
• 3.2 flowchart
• 4. Code Description
• 4.1 HTML
• 4.2 JavaScript
• 4.3 CSS
• 5. Displaying Result Functions
• 6. Summary of Assignment

Introduction

This is a blog for realizing a simple web-based visual calculator using HTML, CSS and JavaScript.

1. PSP Form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	60	80
• Estimate	60	80
Development	290	525
• Analysis	30	90
• Design Spec	10	20
• Design Review	20	30
• Coding Standard	20	20
• Design	30	45
• Coding	120	180
• Code Review	30	50
• Test	30	90
Reporting	205	300
• Test Repor	90	90
• Size Measurement	15	35
• Postmortem & Process Improvement Plan	100	175
Sum	555	905

2. Problem-Solving Ideas

2.1 how to think

After reading the requirements of this task, I learned that it not only requires implementing calculator functionality in local software but also creating a user interface and demonstrating it to the calculator users. I have initially decided to create a website to achieve these functionalities because I have seen many web-based mini programs before, which are very user-friendly and easy to use. Additionally, after searching on CSDN and bilibili, I found numerous relevant beginner tutorials that can be referenced. Therefore, I have decided to make a web-based calculator.

2.2 how to find information

After deciding on my main direction, I learned from websites like Zhihu that website development falls under front-end development, and the key technologies required for it are HTML, CSS, and JavaScript. Since I had never used these three technologies before, I spent a lot of time during the research phase to determine that creating a website requires HTML + CSS + JavaScript and what editing software or platform to use. Finally, I came across a blog on CSDN that mentioned using the computer's built-in text document (txt) and simply changing the file extension to .html to create a webpage without the need for additional software. Later on, while browsing through HTML tutorials, I discovered an "HTML/CSS/JS Online Tool" that had better formatting capabilities, so I decided to use it as a tool for modifying the code.

3. Design and Implementation Process

3.1 code organization and implementation

• Firstly, I wrote the HTML code as it was the fastest way to create a basic layout of the calculator page. By learning the basics of HTML, I chose to create a table to simulate the layout of the calculator and created buttons in each cell to represent different numbers or operators. Then, I created a textbox for user input. At this point, the webpage could display the layout of the calculator and its buttons.

• Next, I wrote JavaScript code to capture user input, store it in a calculation queue, and then used the built-in eval() function of JavaScript to calculate the result. With this, the webpage was able to perform calculator operations.

• The next step was to use CSS to beautify the webpage. I set up different colors for background, numbers and characters, buttons, click, and mouse hover. Additionally, I redefined the appearance of the table.

  3.2 flowchart

  graph LR
  A(Start) -->|select| process1[number or operator]
  process1 --> process1
  process1 -->|del| process1
  process1 -->|=| judge2{valid number}
  judge2 --> |yes| process2[print out result]
  judge2 --> |no| process3[print out descriptive result]
  process3 -->|AC| End
  process2 --> process1
  process2 -->|AC| End(clear the screen)
  

4. Code Description

4.1 HTML

The following code creates a table and adds buttons in its cells.

<tr>
    <td><button class="num">del</button></td>
    <td><button class="num">0</button></td>
    <td><button class="num">.</button></td>
    <td><button class="calculate">=</button></td>
</tr>

It needs to be written within the tag<body></body>, which is something beginners need to be aware of.

4.2 JavaScript

The core idea of this code is to use the built-in eval() function in JavaScript to evaluate the mathematical expressions. However, since the calculator panel may contain symbols that cannot be directly evaluated but are used for user understanding, it is necessary to replace these symbols before using eval(). Here is an example of the code:

try {
         // 计算输入表达式的结果
    var current = input.value
                 .replace(/×/g, '*')
                 .replace(/÷/g, '/')
                 .replace(/sin/g, 'Math.sin')
                 .replace(/cos/g, 'Math.cos')
                 .replace(/tan/g, 'Math.tan');

         // 使用 eval() 对计算表达式进行求值
    var result = eval(current);
    console.log(result);
    } catch (e) {
        result = 'Error!';
    }

4.3 CSS

The following code is used to specify the style of a table, including center alignment, border merging, background color, and shadow effect.

table {
    margin: auto;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
    }

5. Displaying Result Functions

This calculator implements addition, subtraction, multiplication, division, modulo, and basic trigonometric function calculations. The GIF demonstrates that it correctly evaluates the expression “4 - 5 + 6 ÷ 3” and computes the sine of 1. Finally, the “AC” button clears the screen.

6. Summary of Assignment

I have built a calculator from scratch by writing HTML, which provides the initial appearance and layout of the calculator. Then, I utilized JavaScript to enhance the functionality of the web-based calculator, allowing users to perform calculations seamlessly. Additionally, CSS code was used to improve the aesthetics and layout of the webpage.
The result is a visually appealing and fully functional web-based calculator that is both sleek in design and performs accurately.