Front-End and Back-End Separated Calculator

832101230蔡心林

已于 2023-10-22 23:29:53 修改

阅读量59

点赞数

文章标签：前端

于 2023-10-22 23:28:37 首次发布

本文链接：https://blog.csdn.net/qq_61977032/article/details/133965812

版权

文章目录

Introduction
1.Personal Information
2.PSP Table
3.Planning and Executing Stages
Personal Learnings

Introduction

The significance of this project lies in its practical implications. It enabled the application of knowledge in HTML, CSS, and JavaScript to design an intuitive user interface. Simultaneously, it provided insights into the back-end, involving the creation of an Express.js server to handle calculation requests and responses. The project not only enhanced development skills but also promoted effective communication between the front-end and back-end, highlighting the role of data exchange in web applications.

1.Personal Information

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	hthttp://t.csdnimg.cn/janAWtps://bbs.csdn.net/topics/617332156
The Aim of This Assignment	Front-End and Back-End Separated Calculator
MU STU ID and FZU STU ID	21125554_832101230

2.PSP Table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	20	30
• Estimate	20	10
Development	260	240
• Analysis	600	720
• Design Spec	20	20
• Design Review	10	10
• Coding Standard	30	30
• Design	180	120
• Coding	500	520
• Code Review	60	120
• Test	120	60
Reporting	60	100
• Test Repor	60	20
• Size Measurement	60	30
• Postmortem & Process Improvement Plan	60	30
Sum	2000	2030

3.Planning and Executing Stages

3.1 Frontend Design

The front-end code, represented by calculator.html, is responsible for creating the user interface of the visual calculator. It consists of HTML elements such as input fields, buttons, and associated JavaScript functions for user interactions.

The <input> element with the id="display" is used to display both the user input and the calculation results.
Numeric buttons (e.g., 0-9) and arithmetic operator buttons (+, -, *, /) are presented for user input. These buttons have onclick attributes to trigger JavaScript functions.
Special operation buttons for trigonometric functions (sin, cos, tan) and exponentiation (EXP) are available, allowing users to perform advanced calculations.
The calculateResult() function is executed when the “=” button is clicked, which computes the result of the expression entered by the user and displays it.
The clearDisplay() function clears the input field when the “C” button is clicked.
The displayHistory() function retrieves and displays the last ten historical records from the back-end when the “History” button is clicked. The results are shown in the ans field, providing users with a history of previous calculations.

3.2Frontend codes

<!DOCTYPE html>
<html>
<head>
    <title>可视化计算器</title>
</head>
<body>
    <h2>计算器</h2>
    <input id="display" type="text" readonly>
    <br>
    <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="clearDisplay()">C</button>
    <button onclick="appendToDisplay('÷')">/</button>
    <button onclick="calculateSin()">sin</button>
    <button onclick="calculateCos()">cos</button>
    <button onclick="calculateTan()">tan</button>
    <button onclick="appendToDisplay('EXP')">EXP</button>
    <br>
    <button onclick="displayHistory()">历史记录</button>
    <input id="ans" type="text" readonly>
</body>
<script>
</script>
</html>

3.3 Backend Design

The back-end code, written in Node.js with Express.js, serves as the server responsible for handling calculation requests and managing historical data.

The /calculate route, which handles POST requests, receives mathematical expressions from the front-end. It then uses JavaScript’s eval function to compute the results and stores both the input expression and the result in a history array. If the expression is invalid, it responds with a 400 error to the front-end.
The /history route, designed for GET requests, provides the front-end with the ten most recent historical records from the history array.
A history array is used to keep track of previously calculated expressions and their results.
The server is set to listen on port 3000.

3.4 Backend codes

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

const history = [];

app.post('/calculate', (req, res) => {
    const expression = req.body.expression;
    try {
        const result = eval(expression);
        history.push({ expression, result });
        res.json({ result });
    } catch (error) {
        res.status(400).json({ error: "Invalid expression" });
    }
});

app.get('/history', (req, res) => {
    const lastTen = history.slice(Math.max(history.length - 10, 0));
    res.json(lastTen);
});

app.listen(3000, () => {
    console.log('3000');
});

4.Calculator Display

https://pic.imgdb.cn/item/65353dbcc458853aef1c3b54.gif
在这里插入图片描述

在这里插入图片描述

Personal Learnings

Finishing this calculator task provided me with valuable front-end and back-end development experience, reinforced my problem-solving skills, familiarized me with the field of web development, and ignited my interest in continued learning and exploration. It was a highly beneficial learning journey that will help me make progress in the software development domain.