Simple Visual Calculator

832101229鲍琳

已于 2023-10-09 19:13:37 修改

阅读量49

点赞数

文章标签： html5 javascript css 前端前端框架

于 2023-10-09 19:08:09 首次发布

本文链接：https://blog.csdn.net/weixin_65717065/article/details/133690787

版权

Software Engineering Practice First Assignment——Simple Visual Calculator

Catalogue

Software Engineering Practice First Assignment——Simple Visual Calculator

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 Calculator
MU STU ID and FZU STU ID	<21126267_832101229>

1 Introduction

The task of this blog is to create a calculator with a visual interface. The basic requirements are to achieve addition, subtraction, multiplication, division, clearing and other functions. Advanced requirements are to achieve power operations, trigonometric functions and other functions. This blog post documents the work and process of the task.

2 PSP form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	40	30
Development
• Analysis	30	30
• Design Spec	20	35
• Design Review	10	20
• Coding Standard	30	35
• Design	45	60
• Coding	120	160
• Code Review	30	45
• Test	30	45
Reporting
• Test Repor	30	30
• Size Measurement	30	20
• Postmortem & Process Improvement Plan	30	20
Sum	435	520

3 Description of problem-solving ideas

Front-end page visualization mainly consists of HTML, CSS, JavaScript. These components work together to realize the display of web content, the definition of style and the presentation of web interaction. In this task, HTML is responsible for building the page structure of the calculator, CSS is responsible for styling the appearance of the calculator, and JavaScript provides the interactive functions and calculation logic of the calculator, so as to realize the design and development of a simple visual calculator.

4 Design and implementation process

When the user clicks a number button or an operator button, the corresponding onclick event handler (appendCharacter(event)) is triggered, appends the characters on the button to the input box.
If the user clicks the equal button, the corresponding onclick event handler (calculate()) is fired and starts to execute the calculation logic.
Obtain the expression in the input box.
Use the eval() function to evaluate the expression and get the result.
Update the calculation result to the input box and display it to the user.
The user clicks the Clear button (AC) to clear the contents of the input field, and the corresponding onclick event handler (clearInput()) is triggered to set the value of the input field to an empty string.

The above logic loops until the user finishes the operation.

key step flow chart

5 Code description

HTML code

<!doctype html>
<html>
<head>
    <title>calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form class="calculator" name="calc">
        <input class="value" type="text" name="text">
        // set buttons
        <span class="number clr" onclick="clearInput()">AC</span>
        <span class="number" onclick="deleteLastCharacter()">&larr;</span>
        <span class="number" onclick="appendCharacter(event)">/</span>
        <span class="number" onclick="appendCharacter(event)">*</span>
        <span class="number" onclick="calculateTrigFunction('sin')">sin</span>
        <span class="number" onclick="calculateTrigFunction('cos')">cos</span>
        <span class="number" onclick="calculateTrigFunction('tan')">tan</span>
        <span class="number" onclick="appendCharacter(event)">7</span>
        <span class="number" onclick="appendCharacter(event)">8</span>
        <span class="number" onclick="appendCharacter(event)">9</span>
        <span class="number" onclick="appendCharacter(event)">-</span>
        <span class="number" onclick="appendCharacter(event)">4</span>
        <span class="number" onclick="appendCharacter(event)">5</span>
        <span class="number" onclick="appendCharacter(event)">6</span>
        <span class="number plus" onclick="appendCharacter(event)">+</span>
        <span class="number" onclick="appendCharacter(event)">3</span>
        <span class="number" onclick="appendCharacter(event)">2</span>
        <span class="number" onclick="appendCharacter(event)">1</span>
        <span class="number" onclick="appendCharacter(event)">0</span>
        <span class="number" onclick="appendCharacter(event)">00</span>
        <span class="number" onclick="appendCharacter(event)">.</span>
        <span class="number equal" onclick="calculate()">=</span>
    </form>   
</body>
</html>

CSS code

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins ' , sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items : center;
    min-height: 100vh;
    background: #7a929e;
}
.calculator
{
    position: relative;
    display: grid; 
}  
.calculator .value
{ 
    grid-column : span 4;
    height: 80px;
    text-align: right;
    padding: 15px;
    font-size: 15px;    
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(3, 3, 3, 0.133);
}
.calculator span
{
    display: grid;
    width: 50px;
    height: 50px;
    color: #fff;
    background-color: #1d5772;
    place-items: center;
    border: 1px solid rgba(0.0.0,0.1);
}
.calculator span:active
{
    color: #111;
    background-color: #649e9b;
}
.calculator span.clr
{
    grid-column: span 2;
    width: 100px;
}
.calculator span.plus
{
    grid-row: span 2;
    height: 100px;
}
.calculator span.equal
{
    background-color: #3bcbd5;
}

JS code

  function calculate() {    //Handles computation operations and triggers this function when the user clicks the equal button.
            var input = document.calc.text;
            input.value = eval(input.value);
        }
        
        function calculateTrigFunction(funcName) {  //Gets the value in the current input box as an Angle and converts it to radians. Keep the result four decimal places and update it into the input box
            var input = document.calc.text;
            var value = parseFloat(input.value);
            var radians = value * (Math.PI / 180);
            input.value = Math[funcName](radians).toFixed(4);
        }
        
        function clearInput() {     //Used to clear the content in the input box
            var input = document.calc.text;
            input.value = '';
        }
        
        function deleteLastCharacter() {       //Remove the last character
            var input = document.calc.text;
            input.value = input.value.slice(0, -1);
        }
        
        function appendCharacter(event) {     //Append character
            var input = document.calc.text;
            var character = event.target.innerText;
            input.value += character;
        }

GitHub link：https://github.com/301lab

6 Display

calculator

·Description

The number and operator buttons represent their respective default meanings.
When the user presses the number button, the number will be displayed. When the operation button is pressed, the operator will be displayed. When the equal sign is pressed, the result will be displayed.
The return arrow is used to clear the last input character, 00 is used to represent “hundred”. While sin, cos, tan are trigonometric functions and can be calculated accordingly.

7 Conclusion

In this blog, I accomplished this task based on my knowledge of html, css, js ,etc. It was a simple hands-on experience, simplifying complex steps step by step into small tasks that I completed. In the step by step analysis, I have a deep understanding of all aspects. In this process, I constantly solve problems and experience the joy of exploration and development. I have ideas to improve and enrich this project and look forward to developing more projects.