Making calculator (Web version, 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 Aim of This Assignment	Make a visual easy calculator
MU STU ID and FZU STU ID	21124477_832101201

I. Introduction

In this blog post, I will explain how I completed a visual calculator with addition, subtraction, multiplication, division, squares, square root, parentheses, and simple trigonometric operations. This calculator can be opened through the web page, convenient and fast.

II. PSP table

**Personal Software Process Stages**	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	60	75
Development
• Analysis	25	30
• Design Spec	8	8
• Design Review	5	8
• Coding Standard	25	20
• Design	15	10
• Coding	200	230
• Code Review	60	30
• Test	15	10
Reporting
• Test Repor	65	70
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	40	45
**Sum**	468	516

III. Problem-solving ideas

I got relevant information from Bilibili website, CSDN website and Baidu. To implement a simple calculator for visualization, I found the following ways:

i. Use existing calculator libraries or frameworks:

Search for and use existing calculator libraries or frameworks, such as JavaScript's Math.js or jQuery calculator plug-ins. These libraries and plug-ins have provided the basic functions and interface of the calculator, making it possible to quickly implement a simple visual calculator.

ii. Use programming languages and graphics libraries:

Use a programming language (e.g., Python, Java, C++, etc.) and graphics libraries (e.g., Tkinter, JavaFX, Qt, etc.). This approach requires some programming knowledge and skills.

iii. Use Web technologies:

Another simple and widely available solution is to use Web technologies such as HTML, CSS, and JavaScript. Use HTML to create the calculator's interface, CSS to style the interface, and JavaScript to write the calculator's logic and interaction. This method does not require the installation of additional software or libraries, and can be run directly in the browser.

iv. Determination method

By understanding the difficulty of the above mentioned code and combining my own ability, I choose Web technology, that is, HTML+CSS+JS. I integrated the Code of the three parts into the same software platform, using Visual Studio Code.

IV. Design and implementation process

i. Interface design:

Design a user-friendly interface so that users can enter numbers and operators and view the results of calculations. Use HTML and CSS to create and style interface elements. According to my personal preference, I set the background color of the web page to blue, the background color of the calculator to pink, the edge of the calculator to purple, and the keys to gray. I adjusted the size of the calculator and its position on the web page step by step to get the current look. The following is the CSS module code.

    // Web background design
body {
            font-family: Arial, sans-serif;
            background-color: #69b0ebc0;
            text-align: center;
          
        }
//Computer page design
.calculator {
    width: 300px;
    margin: 150px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: pink;
    box-shadow: 0 0 10px rgb(153, 61, 235);
    
}
//Result display field
#result {
    width: 90%;
    margin-bottom: 10px;
    padding: 5px;
}
//Button area style design
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
}

button {
    padding: 5px;
}

ii. User input:

We need to obtain user input, including numbers and operators. The JavaScript programming language can be used to listen for user click events and store the input value in a variable.

In the following HTML module code, we use <input> Element to display the result of the calculation, using the <button> Element to define the calculator's button. Each button is bound to a corresponding JavaScript function, which will be implemented in the next steps.

//User input design
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <div class="buttons">
            <button onclick="clearResult()">C</button>
            <button onclick="deleteLastChar()">&larr;</button>
            <button onclick="appendChar('(')">(</button>
            <button onclick="appendChar(')')">)</button>
            <button onclick="appendChar('7')">7</button>
            <button onclick="appendChar('8')">8</button>
            <button onclick="appendChar('9')">9</button>
            <button onclick="appendChar('/')">/</button>
            <button onclick="appendChar('4')">4</button>
            <button onclick="appendChar('5')">5</button>
            <button onclick="appendChar('6')">6</button>
            <button onclick="appendChar('*')">*</button>
            <button onclick="appendChar('1')">1</button>
            <button onclick="appendChar('2')">2</button>
            <button onclick="appendChar('3')">3</button>
            <button onclick="appendChar('-')">-</button>
            <button onclick="appendChar('.')">.</button>
            <button onclick="appendChar('0')">0</button>
            <button onclick="calculateResult()">=</button>
            <button onclick="appendChar('+')">+</button>
            <button onclick="calculateSquare()">x²</button>
            <button onclick="calculateSquareRoot()">√</button>
            <button onclick="calculatesin()">Sin</button>
            <button onclick="calculatecos()">Cos</button>
        </div>
        <h1>Wangxinyi's calculator</h1>
    </div>

iii. Calculation logic:

We need to implement the basic calculation logic of the calculator, including addition, subtraction, multiplication, division, square and other operations. The JavaScript programming language is used to implement this logic and compute the result when the user clicks on the equal sign. JavaScript Math.js provides me with the basic functions of the calculator and the framework of the interface implementation, which is very convenient.

//Calculation result
function clearResult() { //Clear interface
    document.getElementById("result").value = ''; 
} //Gets a reference to an HTML element. Use JS built-in libraries to achieve computing functions, and so on

function deleteLastChar() { //Delete a character
    let result = document.getElementById("result").value;
    document.getElementById("result").value = result.slice(0, -1);
}

function appendChar(char) {
    let result = document.getElementById("result").value;
    document.getElementById("result").value = result + char;
}

function calculateResult() {
    let result = document.getElementById("result").value;
    let calculatedResult = eval(result);
    document.getElementById("result").value = calculatedResult;
}

function calculateSquare() {
    let result = document.getElementById("result").value;
    let calculatedResult = eval(result) ** 2;
    document.getElementById("result").value = calculatedResult;
}

function calculateSquareRoot() {
    let result = document.getElementById("result").value;
    let calculatedResult = Math.sqrt(eval(result));
    document.getElementById("result").value = calculatedResult;
}


function calculateCos() {
  try {
    result.value = Math.cos(eval(result.value));
  } catch (error) {
    result.value = 'ERROR';
  }
}

function calculateSin() {
  try {
    result.value = Math.sin(eval(result.value));
  } catch (error) {
    result.value = 'ERROR';
  }
}
</script>

iv. Program flow chart of basic operation

v. A link to the full project code in GITHUB

GitHub - wxyyyyyyyyyy/ass1

vi. State diagram

State diagram is a graphical representation of system state and state transition tool. The following is an example of a simple state diagram to show the state and state transitions of a calculator.

V. Results display

i. Basic  functions

Implementation of basic budget functions, including addition, subtraction, multiplication and division, decimal point.

计算器基础应用

ii. Additional functions

Implementation of additional functions, including simple trigonometric functions, square, square root, bracket operations.

附加功能

VI. Deficiencies and future prospects of this calculator

i. Insufficiency of function

Although it includes basic addition, subtraction, multiplication, division, and decimal point operations, sin and cos, squares, and parentheses operations, it lacks some advanced functions, such as exponential operations, hierarchy, π, and so on.

ii. Future outlook

We can further optimize the code and algorithms to improve the performance and stability of the calculator. At the same time, we can also consider extending the calculator function to mobile devices to meet the needs of different users.

In short, through continuous improvement and innovation, we can make this simple calculator project more complete, provide a better user experience and more rich features.

VII. Summary

In this assignment, my achievements are as follows:

(1) I learned and understood the html, css and javascript of front-end web development, and improved my programming ability.

(2) Understand the purpose of GITHUB and master the use method.
(3) Learned to publish CSDN blog, exercised the ability of analysis and summary.

(4) Improved my ability to practice independently. Before that, I had never developed and produced any software project independently.
In general. Very much harvest! It was a valuable experience.