Simple Java-based calculator in html format

Introduction

This blog post shows steps on how to write a simple calculator in JavaScript. The project was compiled using vscode software. The language is JavaScript and the format is HTML.

Link Table

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 Aim of This Assignment	Calculator with a visual interface
MU STU ID and FZU STU ID	21126585_832101101

Link to Github: https://github.com/wenwu2023/HOMEWORK

Problem-Solving Ideas

• The project needs to make a calculator with four basic operations and some advanced functions.
• The project will try to design a calculator to meet basic computing needs, so that functions can be added later.
• Find related articles from the CSDN community to learn the basic functions to use.

The process of design and implementation

Design flowchart

Interface Initialization

• Declarative HTML format, based on Javascript design program, using CSS to design an interactive table.

User Input

• Directly Input
  

• By Button
  
  “onclick” will execute a function to input the numId.

Calculation and Result in String Form

The program uses a string variable to record the calculation, so any button press should modify the string. After calculating the result of the expression using eval(), it is stored as the variable result. Then change the string value to result. This step allows the program to use a custom function Ans() to add the result of the previous calculation.

Calculate with eval()

In the program, the address of the button and the display are numId, and the following numId is the address of the display.

<td colspan="4">
<input type="text" id="numId" style="height: 90px; 
width: 350px; font-size: 50px" >
</td>
/* Calculator display in CSS table*/

// The functions of Button "=" and "Ans"
var str;
var result=0;
function Press_Result()
        {
                    str=document.getElementById("numId");
                    // Read the contents of numId
                    result = eval(str.value).toFixed(7);
                    // The result retains 7 decimal places
                    str.value = result;
        }
function Ans(){
            str.value = str.value + result;
        }

Use Math Library to Achieve Advanced Functionalities

Since we need to evaluate string values, we can use functions from the Math library to represent advanced functionalities.
For example:

/* The button "sin" */
<td>
<input type="button" value="sin" id="sin" 
οnclick="Press_Sign('Math.sin(')"
style="height: 70px; width: 80px; font-size: 35px">
</td>
/* The button "cos" */
<td>
<input type="button" value="cos" id="cos" 
οnclick="Press_Sign('Math.cos(')"
style="height: 70px; width: 80px; font-size: 35px">
</td>

Design The Output Display According to Realistic Calculator Logic

In order for the final result to be as close as possible to the real calculator, we need the final output to be able to reflect errors or, in some cases, remove superfluous symbols. This aspect will be explained in special logic.

Partial special logic

This program requires some special logic to reduce misinput and invalid results.

Clear the Previous Result Display Before Starting A New Calculation

The logic here is to detect if the last input was “equal”. Then we add this function to the event function of the number key and the special symbol.

// The value to record 
var isequal = false;
function Press_Result()
{
           isequal = true;
           // ...
}
function check_equal(){
         if(isequal){
         C();
         isequal = false;
         }
}
function Press_Num(num)
        {
            check_equal();
           //...
        }
function Press_Sign(sign)
        {
            check_equal();
            // ...
        }

Replace incorrect symbol input in some case

Three scenarios are considered here:

• The last output before pressing “=” is a symbol (get invalid output);
• String The first input is a symbol (ibid.)
• Enter a symbol followed by another symbol

var issign = false;
function get_sign(){
            issign = true;
        }
function Delete_sign(){
            if(issign){
                Press_Delete();
                // Delete an invalid symbol
                // Only one-character symbols can be output
                // It needs improvement
            }
        }
function Press_Sign(sign)
        {
            check_equal();
            str = document.getElementById("numId");
            Delete_sign();
            if(str.value == ""){
                str.value = str.value + "0";
            }
            // It means the string should start with 0 
            // but not a symbol
            str.value = str.value + sign;
            get_sign();
        }
function Press_Result()
        {
                    isequal = true;
                    // issign=true if there has a signed output
                    Delete_sign();
                   // ...
        }

Error Expression Results In “error”

Just use “try{}catch{}”

function Press_Result()
        {
                    isequal = true;
                    Delete_sign();
                    str=document.getElementById("numId");
                    try{
                        result = eval(str.value).toFixed(7);
                        str.value = result;
                    }catch{
                        str.value="error";
                    }
        }

Code
JAVASCRIPT

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JAVA-CAL</title>
    <h1>Made by 1101</h1>
    <h3>The initial Ans is none</h3>
    <h3>Follow the logic of parentheses</h3>
    <script type="text/javascript">

        var str;
        var result=0;
        var isequal = false;
        var issign = false;

        function get_sign(){
            issign = true;
        }
        function Delete_sign(){
            if(issign){
                Press_Delete();
            }
        }
        function C()
        {
            str = document.getElementById("numId");
            str.value = "";
        }
        function Press_Delete(){
            str = document.getElementById("numId");
            var length=str.value.length;
            str.value = str.value.substr(0,length-1);
        }
        function check_equal(){
            if(isequal){
                C();
                isequal = false;
            }
        }
        function Press_Sign(sign)
        {
            check_equal();
            str = document.getElementById("numId");
            Delete_sign();
            if(str.value == ""){
                str.value = str.value + "0";
            }
            str.value = str.value + sign;
            get_sign();
        }
        function Press_Num(num)
        {
            check_equal();
            issign=false;
            str = document.getElementById("numId");
            str.value = str.value + num;
        }
        function Ans(){
            check_equal();
            str.value = str.value + result;
        }
        function Press_Result()
        {
                    isequal = true;
                    Delete_sign();
                    str=document.getElementById("numId");
                    try{
                        result = eval(str.value).toFixed(7);
                        str.value = result;
                    }catch{
                        str.value="error";
                    }
        }
    </script>

CSS TABLE

 </head>
 <body bgcolor="009966">
        <table border="8px" align="center" bgColor="808080"
               style="height: 400px; width: 460px">  
            <tr>
                <td colspan="4">
                    <input type="text" id="numId" style="height: 90px; width: 350px; font-size: 50px" >
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="C" id="C" οnclick="C()"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="sin" id="sin" οnclick="Press_Num('Math.sin(')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="cos" id="cos" οnclick="Press_Num('Math.cos(')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="^" id="^" οnclick="Press_Sign('**')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="√" id="√" οnclick="Press_Num('Math.sqrt(')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="7" id="7" οnclick="Press_Num(7)"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="8" id="8" οnclick="Press_Num(8)"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="9" id="9" οnclick="Press_Num(9)"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="+" id="add" οnclick="Press_Sign('+')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="%" id="%" οnclick="Press_Num('*0.01')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="4" id="4" οnclick="Press_Num(4)"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="5" id="5" οnclick="Press_Num(5)"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="6" id="6" οnclick="Press_Num(6)"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="-" id="sub" οnclick="Press_Sign('-')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="tan" id="tan" οnclick="Press_Num('Math.tan(')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="1" id="1" οnclick="Press_Num(1)"
                            style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="2" id="2" οnclick="Press_Num(2)"
                             style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="3" id="3" οnclick="Press_Num(3)"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="*" id="mul" οnclick="Press_Sign('*')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="^2" id="^2" οnclick="Press_Num('**2.0')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="0" id="0" οnclick="Press_Num(0)"
                            style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="Ans" id="Ans" οnclick="Ans()"
                            style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="." id="point" οnclick="Press_Sign('.')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="/" id="divide" οnclick="Press_Sign('/')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="e" id="e" οnclick="Press_Num('Math.E')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Del" id="clear" οnclick="Press_Delete()"
                             style="height: 70px; width: 80px; font-size: 35px" >
                </td>
                <td>
                    <input type="button" value="=" id="result" οnclick="Press_Result()"
                             style="height: 70px; width: 80px; font-size: 35px" >
                </td>
                <td>
                    <input type="button" value="(" id="point" οnclick="Press_Num('(')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value=")" id="divide" οnclick="Press_Num(')')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
                <td>
                    <input type="button" value="pi" id="pi" οnclick="Press_Num('Math.PI')"
                           style="height: 70px; width: 80px; font-size: 35px">
                </td>
            </tr>
        </table>
    </body>
    </html>

Simple Process

Result Display

Summary

• The program can basically complete the daily basic operations, and has 7 decimal precision.
• The program also needs more functions to improve, and it needs to integrate and simplify parts of the code in the future.