本文主要是介绍Front-End and Back-End Separated Calculator,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- Introduction
- 1.Personal Information
- 2.PSP Table
- 3.Planning and Executing Stages
- 3.1 Frontend Design
- 3.2Frontend codes
- 3.3 Backend Design
- 3.4 Backend codes
- 4.Calculator Display
- 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 theid="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 theans
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’seval
function to compute the results and stores both the input expression and the result in ahistory
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 thehistory
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.
这篇关于Front-End and Back-End Separated Calculator的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!