A super calculator based on html.

1. Introduction

This is a blog that started writing a calculator based on HTML language from scratch.
In this blog, I will provide a detailed introduction to the implementation of an HTML based web calculator and showcase the final product.
The calculator I created can perform functions such as addition, subtraction, multiplication, division, zeroing, exponentiation, trigonometric functions, exponents, logarithms, etc.

Link to the finished project code：cuifu123/super-calculator (github.com)

contend：

1. Introduction

2. Basic information about the author

3. PSP Table

4. Ideas before developing the project

5. Design and Implementation Process

6. Code Description

A. Overall layout of buttons and titles in HTML and Css

 B. Coding of calculator related functions in Java Script

1.Pass in a value calculation

2.Clear data content

3.Start calculating formula

4.Functions used in calculations

7. Project finished product display

8. Project Disadvantages and Future Prospects

---

2. Basic information about the author

The link of my class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617332156
The Aim of This Assignment	Create a calculator with a visual interface.
MU STU ID and FZU STU ID	21126445_832102102

3. PSP Table

Personal Software Process Stages	Estimated Time(minutes)	Actual Time(minutes)
Planning
• Estimate	40	50
Development
• Analysis	30	35
• Design Spec	10	20
• Design Review	20	30
• Coding Standard	40	50
• Design	50	70
• Coding	40	30
• Code Review	60	80
• Test	30	50
Reporting
• Test Report	20	30
• Size Measurement	40	60
• Postmortem & Process Improvement Plan	30	50
Sum	410	555

4. Ideas before developing the project

In this project, the basic goal is to complete functions including input numbers and addition, subtraction, multiplication, division, and subtraction, and then implement functions including trigonometric and power functions.
Since it does not involve secondary transmission of data, there is no need to load a server to store the data.
Java Script, Css, and HTML can be used to achieve web visualization of a simple calculator.
So in this article, we use only HTML language for programming and implement a simple calculator

5. Design and Implementation Process

When designing and implementing a web calculator, the following is a detailed design and implementation process:
1. Design user interface:
-Determine the overall layout and style of the web calculator. Consider using container elements to wrap the content of the calculator and set appropriate width, margins, and background color.
-Create a text input box as a number bar to display user input and calculation results.
-Design button layout, which can use grid layout or other layout techniques. Organize buttons into appropriate rows and columns so that users can easily click on them for input and operation.
2. Update HTML structure:
-Open the HTML file and locate the relevant HTML elements, such as number bars and buttons, in the file.
-Adjust the order and nesting relationship of elements to match the layout you defined in the user interface design. Ensure that the buttons and number bar elements are in the correct positions.
3. Update JavaScript code:
-Find the JavaScript code section associated with the number bar and button elements. Usually, these elements are identified using the 'id' attribute.
-Update JavaScript functions related to calculation logic to append the calculation process to the number bar. Here are some update guidelines for example functions:
-The 'appendToDisplay (value)' function: Appends the given value to the current content of the number bar. This function is called every time a button is clicked to add numbers and operators to the number bar.
-The 'calculate()' function: retrieves the content of the number bar and uses the 'eval()' function to calculate the result. Append the calculation expression and result to the number bar to display the complete calculation process.
-Other mathematical functions: Update the logic of mathematical functions according to functional requirements, ensuring that the operations and results are added to the number column after calculating the results.
4. Operation and Testing:
-Save the HTML file and open it in a browser to view and test the updated web calculator.
-Ensure that the layout of the buttons is consistent with the design, and verify that the calculation process is displayed correctly in the number bar.
-Test various calculations and mathematical operations, including addition, subtraction, multiplication, division, exponent, square root, logarithm, etc., to ensure that the calculator can execute and display the calculation process correctly.
5. Adjustments and improvements:
-Make necessary adjustments and improvements based on test results and user feedback. For example, you can optimize layout, improve user experience, add other features, and so on.
-Conduct iterations and continuous testing to ensure the stability and correctness of web calculators in different scenarios and usage scenarios.
Through the above steps, you can design and implement a web calculator, and display the calculation process in the number bar. This process requires designing a user interface, updating HTML structure, modifying JavaScript code, testing and adjusting to achieve the required functionality and user experience.

The use of library functions in this article's calculation formula can avoid many accuracy and positional errors

​

6. Code Description

A. Overall layout of buttons and titles in HTML and Css

The code is roughly as follows, where I implemented the page title and corresponding button layout on HTML:

    <h2>Super Calculator</h2>

Use a tabular format to make the button layout neat, and use the "onclick" command to call the corresponding elements and use functions.

<body>
  <div class="container">
    <h2>Super Calculator</h2>
    <input type="text" id="display" readonly>
    <div class="calculator">
      <button onclick="power()">^</button>
      <button onclick="sqrt()">√</button>
      <button onclick="log()">lg</button>
      <button onclick="exp()">exp</button>
      <button onclick="sin()">sin</button>
      <button onclick="cos()">cos</button>
      <button onclick="tan()">tan</button>
      <button class="equals" onclick="calculate()">=</button>
      <button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button onclick="appendToDisplay('/')">/</button>
      <button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button onclick="appendToDisplay('*')">*</button>
      <button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button onclick="appendToDisplay('-')">-</button>
      <button onclick="appendToDisplay('.')">.</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="clearDisplay()">AC</button>
      <button onclick="appendToDisplay('+')">+</button>


    </div>
  </div>

In order to achieve the overall layout and color matching of the page on Css:

  <style>
    .container {
      width: 300px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    
    .calculator {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      margin-bottom: 10px;
    }
    
    input[type="text"] {
      grid-column: 1 / span 4;
      width: 100%;
      margin-bottom: 10px;
      padding: 5px;
    }
    
    button {
      padding: 10px;
      font-size: 16px;
    }
    
    .equals {
      grid-column: 4 / span 1;
      background-color: #ff9800;
      color: #fff;
    }
  </style>

 B. Coding of calculator related functions in Java Script

1.Pass in a value calculation

Using this function, whenever appendToDisplay is called and a value is passed in, it will append the value to the current content of the input box. This is useful for numbers and operator buttons in web calculators, as they can append corresponding values to input boxes by calling this function to display the user's input and operation process.

    function appendToDisplay(value) {
      document.getElementById("display").value += value;
    }

2.Clear data content

Using this function, when the clearDisplay function is called, it will set the value of the input box with id "display" to an empty string, thereby clearing the content of the input box.
In web calculators, this function is usually associated with a clear button or action to provide a quick way to clear the content of the input box, allowing users to restart entering new expressions or actions.

    function clearDisplay() {
      document.getElementById("display").value = "";
    }

3.Start calculating formula

When using this function, when calling the calculate function, it will first obtain the expression in the input box, and then use the eval() function to evaluate the expression to obtain the result. Finally, connect the expression with the result and set it as the value of the input box to display the complete calculation process and result in the input box.
In a web calculator, this function is usually associated with an equal sign button or performing a calculation operation to execute the expression entered by the user and display the calculation result.

    function calculate() {
      var expression = document.getElementById("display").value;
      var result = eval(expression);
      document.getElementById("display").value = expression + "=" + result;
    }

4.Functions used in calculations

Using the built-in library functions of JavaScript can reduce task load, improve code reuse rate, and reduce data overflow errors and positional errors

    function power() {
      var base = parseFloat(document.getElementById("display").value);
      var exponent = prompt("Enter the exponent:");
      var result = Math.pow(base, exponent);
      document.getElementById("display").value = base + "^" + exponent + "=" + result;
    }

    function sqrt() {
      var value = parseFloat(document.getElementById("display").value);
      var result = Math.sqrt(value);
      document.getElementById("display").value = "√" + value + "=" + result;
    }

    function log() {
      var value = parseFloat(document.getElementById("display").value);
      var result = Math.log10(value);
      document.getElementById("display").value = "log(" + value + ")=" + result;
    }

    function exp() {
      var value = parseFloat(document.getElementById("display").value);
      var result = Math.exp(value);
      document.getElementById("display").value = "exp(" + value + ")=" + result;
    }

    function sin() {
      var value = parseFloat(document.getElementById("display").value);
      var result = Math.sin(value);
      document.getElementById("display").value = "sin(" + value + ")=" + result;
    }

    function cos() {
      var value = parseFloat(document.getElementById("display").value);
      var result = Math.cos(value);
      document.getElementById("display").value = "cos(" + value + ")=" + result;
    }

    function tan() {
      var value = parseFloat(document.getElementById("display").value);
      var result = Math.tan(value);
      document.getElementById("display").value = "tan(" + value + ")=" + result;
    }

7. Project finished product display

The finished product, as shown in the above figure, can be added, subtracted, multiplied, and divided normally, as well as trigonometric and power functions, exponential functions, and logarithmic functions.

8. Project Disadvantages and Future Prospects

This design currently cannot achieve more efficient nesting between UIs.
To improve the user experience, calculators can set buttons to separate simple calculators from scientific calculators.
In the future, servers can be used to provide this webpage to help more people perform calculations.