Simple Calculator

832101111陈奕晖

已于 2023-10-09 19:42:42 修改

阅读量83

点赞数 1

文章标签： javascript

于 2023-10-04 10:59:56 首次发布

本文链接：https://blog.csdn.net/Shion_Aquamarine/article/details/133544429

版权

The Link Your Class	http://t.csdnimg.cn/xdDRg
The Link of Requirement of This Assignment	http://t.csdnimg.cn/mt5IU
The Aim of This Assignment	create a simple calculator
MU STU ID and FZU STU ID	<832101111_21124728>

Introduction

In this blog post, you will see the process of creating a basic web calculator. This calculator will enable users to perform fundamental arithmetic operations like addition, subtraction, multiplication, and division. HTML, CSS, and JavaScript are used to construct this project.

Interface display

The interface of the simple calculator

PSP Form

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

Code

link: https://github.com/LoveSerena/calculator

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>caculator</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()">C</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('0')">0</button>
            <button onclick="appendToDisplay('.')">.</button>
            <button onclick="calculateResult()">=</button>
            <button onclick="appendToDisplay('/')">/</button>
        </div>
    </div>
    <script src="./js/script.js"></script>
</body>
</html>

This HTML file sets up the structure of our web calculator. It creates a basic webpage with a text input field for displaying results and a container for buttons. The buttons will be dynamically added using JavaScript.

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calculator {
    text-align: center;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 300px; 
}

#display {
    width: 94%;
    padding: 10px;
    font-size: 24px;
    margin-bottom: 10px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-gap: 5px;
}

.buttons button {
    width: 100%;
    height: 50px;
    font-size: 20px;
    margin: 5px;
    cursor: pointer;
}

The CSS file is responsible for styling our web calculator. It defines the visual appearance of the calculator, making it rectangular with a fixed width. It also sets the layout of the buttons using a grid, ensuring they are evenly spaced and have a consistent size.

JavaScript

在这里let display = document.getElementById('display');
let currentInput = '';

function appendToDisplay(value) {
    currentInput += value;
    display.value = currentInput;
}

function clearDisplay() {
    currentInput = '';
    display.value = '';
}

function calculateResult() {
    try {
        currentInput = eval(currentInput);
        display.value = currentInput;
    } catch (error) {
        display.value = 'Error';
    }
}
插入代码片

The JavaScript file provides the functionality for the calculator. It handles user interactions such as button clicks and performs the actual calculations. Functions like appendToDisplay add button values to the input display, clearDisplay clears the display, and calculateResult evaluates and displays the result when the “=” button is pressed. This file essentially brings the calculator to life by making it interactive and functional.

Idea and solution

I chose to make a web calculator using HTML, CSS and JavaScript because it is easy to learn for beginners. What’s more, there are a lot of resources for beginners to refer.
The functions I envision that need to be implemented include addition, subtraction, multiplication, division, and clearing.

Future plan

In the future, I will try to add more functions to the calculator such as trigonometric operations. And a server will be built so that more people can use the calculator. Also, mathematical formulas should be able to be written in the calculator.

Conclusion

Through this project, I learned about front-end development roughly. and have a certain understanding of visual development. The various processes in the project showed me how to develop a web page （or software）. I also understood how to distribute the parts wisely.