A Simple Calculator

832101329滕俊逸

已于 2023-10-08 16:24:12 修改

阅读量70

点赞数 1

文章标签： git vscode

于 2023-10-06 20:32:56 首次发布

本文链接：https://blog.csdn.net/qq_66485601/article/details/133612627

版权

Overall Introduction

In this blog I will follow the requirements of the task to describe how to make a simple calculator, this calculator can implement the basic addition, subtraction, multiplication, division and decimal point operations, while including delete and zero keys.

Here is the code in github

Content

I.basic information
II.PSP table
III.Description of problem-solving ideas
IV.Design and implementation process
V.Code description (annotated at part lines of code)
VI.Displaying result functions with screenshots or gifs and text descriptions.（demonstration）
VII.summary
- 1.disadvantages and future prospect
- 2.harvest and experience

I.basic information

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	http://t.csdnimg.cn/mt5IU
The Aim of This Assignment	Create a calculator with a visual interface
MU STU ID and FZU STU ID	21126178_832101329

II.PSP table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	20	15
• Estimate
Development	10	15
• Analysis	30	45
• Design Spec	10	10
• Design Review	10	10
• Coding Standard	10	10
• Design	60	80
• Coding	120	150
• Code Review	20	15
• Test	15	10
Reporting
• Test Repor	60	80
• Size Measurement	10	15
• Postmortem & Process Improvement Plan	20	15
Sum	425	460

III.Description of problem-solving ideas

First of all, since I was not very experienced in software engineering, I decided to determine the direction to start after getting specific tasks. After inquiring and browsing related content on csdn, bilibili, chatgpt and other websites, I decided to use VS Code software and adopt html, js and css to implement the functions.

IV.Design and implementation process

Through study, I learned that the button of calculator can be set by using the.html file, and the algorithm can be added by including the file with the suffix.js in the html file, and the button size of calculator and the overall interface can be set by including the file with the suffix.css

在这里插入图片描述
This is a flow chart of the underlying logic of a simple calculator.
In general, the idea is to determine the size of the calculator and its buttons, and then determine which function keys, which contain not only the Numbers and operators, but also the comprehensive removal and cancellation of the buttons. Then we will set the operating function. In other words, when I press which button to happen, for example, when the delete is pressed, the last character is deleted, and when the ac is pressed, the formula row and the result row are cleared, and so on. Finally, I added the algorithm code to the compiler and finally checked the feasibility of the calculator.

V.Code description (annotated at part lines of code)

1.html （I will show my code and explain and comment it with < !---->）

Use < div> to add clickable elements

<!DOCTYPE html><!--The basic format of html at the beginning-->
<html>
<head>
    <title>a simple calculator</title>  <!--This step is to add a title name to your web page-->
    <link rel="stylesheet" type="text/css" href="styles.css"><!--Includes css folders to modify the calculator's buttons and interface sizes-->
</head>
<body>
    <div class="calculator"><!--Create a class function to assign keys to the calculator-->
        <input type="text" id="result" readonly>
        <div class="keypad">
            <div class="row">
                <button onclick="appendExpression('7')">7</button> <!-- add button 7 -->
                <button onclick="appendExpression('8')">8</button> <!-- add button 8 -->
                <button onclick="appendExpression('9')">9</button> <!-- add button9 -->
                <button onclick="appendExpression('/')">÷</button> <!-- add button divide -->
            </div>
            <div class="row">
                <button onclick="appendExpression('4')">4</button> <!-- add button4 -->
                <button onclick="appendExpression('5')">5</button> <!-- add button5 -->
                <button onclick="appendExpression('6')">6</button> <!-- add button6 -->
                <button onclick="appendExpression('*')">*</button> <!-- add button multiple -->
            </div>
            <div class="row">
                <button onclick="appendExpression('1')">1</button> <!-- add button1 -->
                <button onclick="appendExpression('2')">2</button> <!-- add button2 -->
                <button onclick="appendExpression('3')">3</button> <!-- add button3 -->
                <button onclick="appendExpression('-')">-</button> <!-- add button subtraction -->
            </div>
            <div class="row">
                <button onclick="appendExpression('0')">0</button> <!-- add button0 -->
                <button onclick="appendExpression('.')">.</button> <!-- add button decimal point -->
                <button onclick="calculateResult()">=</button> <!-- add button equal to -->
                <button onclick="appendExpression('+')">+</button> <!-- add button plus -->
            </div>
            <div class="row">
                <button onclick="deleteLastCharacter()">De</button> <!-- add button delete -->
                <button onclick="clearResult()">Ac</button> <!-- add button return to zero -->
            </div>
        </div>
    </div>

    <script src="script.js"></script><!-- Includes css files to define algorithms for the calculator -->
</body>
</html>

2.css (define the size of the calculator by some concrete functions)

.calculator {    /*Create the appearance of the calculator, such as length, margins, edges, colors*/
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.calculator input[type="text"] { /*Create the appearance of the input box, such as length, width, input numbers appearance size, edge, color*/
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.calculator .keypad {   /*Create keyboard size color etc*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.calculator .row {
  display: flex;
  justify-content: space-between;
}

.calculator button {  /*Create the appearance of the input button, such as length, width, character size, margin, color*/
  width: 100%;
  padding: 10px;
  font-size: 18px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.calculator button:hover {  /*Create the overall background color*/
  background-color: #f2f2f2;
}

3.js （commit with //）

let expression = '';
const resultInput = document.getElementById('result');

function appendExpression(value) {
    expression += value; // Appends the value of the button to the expression
    resultInput.value = expression; // Displays the expression in the input box
}

function calculateResult() {
    try {
        const result = eval(expression); // Evaluate the result of an expression using the eval function
        resultInput.value = result; // Show calculation result
        expression = ''; // Empty expression
    } catch (error) {
        resultInput.value = 'error'; // If the calculation is incorrect, an error message is displayed
    }
}

function clearResult() {
    expression = ''; // Empty expression another
    resultInput.value = expression; // Displays the expression in the input box
}

function deleteLastCharacter() {
    expression= expression.slice(0, -1); // Delete the last character
    resultInput.value = expression; // Displays the expression in the input box
}

VI.Displaying result functions with screenshots or gifs and text descriptions.（demonstration）

请添加图片描述

VII.summary

1.disadvantages and future prospect

There is no doubt that the simple calculator I made has many defects, such as the function is not perfect enough, the code can be more simplified, etc. I think later I will spend more time to learn the algorithm of power function and trigonometric function to add more executable functions to the calculator, and then try to add exponential function and logarithmic function to my calculator. Although I will encounter many difficulties, I will keep on learning more knowledge to apply them to the calculator.

2.harvest and experience

Through this assignment, I learned how to make a simple front-end page, and learned to make the simplest web page through VS code related functions. Meanwhile, I also improved my ability to consult materials and write code. Although such a simple task took me a lot of time, But I think it’s worth it for a beginner and will give me a solid foundation in software engineering subjects