目录
III The process of design and implementation
I Project Introduction
This project is a calculator based on HTML, CSS, and JavaScript implementations. The calculator has basic calculation function, but also supports some advanced mathematical function calculation.
I.I Information table
| 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 | A calculator with a visual interface |
| MU STU ID and FZU STU ID | 21126291______832101114 |
I.II PSP Table
| Personal Software Process Stages | Estimated Time（minutes） | Actual Time（minutes） |
|---|---|---|
| Planning | 30 | 30 |
| • Estimate | 30 | 30 |
| Development | 300 | 390 |
| • Analysis | 20 | 20 |
| • Design Spec | 20 | 20 |
| • Design Review | 10 | 20 |
| • Coding Standard | 10 | 10 |
| • Design | 30 | 30 |
| • Coding | 120 | 180 |
| • Code Review | 30 | 40 |
| • Test | 20 | 20 |
| Reporting | 100 | 90 |
| • Test Repor | 60 | 60 |
| • Size Measurement | 10 | 10 |
| • Postmortem & Process Improvement Plan | 30 | 20 |
| Sum | 430 | 510 |
II problem-solving ideas
1.demand analysis
First, I defined the goal of the project - to create a web version of the calculator that includes both ordinary arithmetic operations and more complex scientific calculations. Once I understand these requirements, I have a clear idea of what features are needed, and I can start adding features to the prototype.
2.Design the user interface
After understanding the requirements, I need to think about how the user interface should be designed to be clean, easy to understand, and friendly. I designed a panel containing numbers, operators, and keys for advanced mathematical functions, and a display area for displaying the results of the operations.
3.Implementation logic
After the interface design is completed, each key needs to be given a corresponding function and displayed on the screen. This requires creating JavaScript functions to perform these tasks. Basic operations such as addition, subtraction, multiplication, and division are relatively simple, but also need to deal with the order of operations when there are multiple operators together.
4.Debugging and optimization
After implementing the basic functionality, I did a lot of testing to find and resolve some issues. For example, it was first discovered that the priority of mathematical operations was not taken into account, then that the results could be wrong due to floating-point accuracy problems during calculations, and then that the user experience needed to be optimized, such as the addition of clear ("C") and delete ("DEL") buttons to make it easier for users to correct input errors.
5.Add function
After completing and improving the basic skills, I began to think about how to make the calculator more powerful and practical. He added functions commonly used in scientific computation, such as exponents, logarithms, square roots, powers, and trigonometric functions.
III The process of design and implementation
Design
HTML implementation
For HTML, we created DOM elements for each of the required elements, such as buttons and display areas, following the design sketch.
CSS implementation
CSS is used to customize the style and layout of these elements. To make the UI look clear, uncluttered, and attractive, we carefully chose colors, fonts, and layouts. I used the Grid layout to create an even grid for the buttons, while the Flexbox layout allowed us to easily center the entire calculator.
JavaScript implementation
This is a critical part of getting the calculator running and responding to user input. I added event listeners to respond to user clicks, implemented computational logic to process user input and compute the result, which is then displayed on the screen. For those complex Math functions, I use the JavaScript Math object.
Test
In the above design, implementation and testing process, we will repeat many times. This is because, during the implementation process, I may find that the original design may have problems or could be improved. Further iteration and improvement of the design and implementation make the final product more complete in function and better in user experience.
Iteration
In the above design, implementation and testing process, I will repeat many times. This is because, during the implementation process, I may find that the original design may have problems or could be improved. Further iteration and improvement of the design and implementation make the final product more complete in function and better in user experience.
IV Coding
HTML
HTML is mainly used to implement the structure of the computer interface. I create a div that contains all the buttons and screen elements of the calculator. I have three main button blocks: the general compute button, the control keys (the "C" and "DEL" keys), and the Advanced compute button, each of which contains a corresponding element. In addition, I have created an input box element for the display to display the calculation process and results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<div id="control-keys">
<button>C</button>
<button>DEL</button>
</div>
<div id="buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>*</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>-</button>
<button>.</button>
<button>0</button>
<button>=</button>
<button>+</button>
</div>
<div id="advanced-buttons">
<button>e^x</button>
<button>e</button>
<button>ln</button>
<button>x^y</button>
<button>√</button>
<button>sin</button>
<button>cos</button>
<button>tan</button>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>CSS
CSS is responsible for the visual styling and layout of the calculator. I set the width for the calculator and adjusted the page layout so that it is centered. All buttons are set to a uniform height, color, and font size style. I used Grid layout rules to ensure that all keys are evenly arranged in each block. Button press effects and digital display styling are also implemented through CSS.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #202020;
font-family: Arial, sans-serif;
}
#calculator {
width: 400px;
}
#display {
width: 100%;
height: 80px;
text-align: right;
margin: 0;
padding-right: 10px;
box-sizing: border-box;
border: none;
background-color: #303030;
color: #fff;
font-size: 50px
}
#control-keys {
display: flex;
justify-content: space-between;
}
#buttons, #advanced-buttons, #control-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#buttons button, #advanced-buttons button, #control-keys button {
height: 80px;
border: none;
border-top: 1px solid #303030;
background-color: #404040;
color: #fff;
font-size: 30px;
outline: none;
}
#buttons button:active, #advanced-buttons button:active, #control-keys button:active {
background-color: #505050;
}JavaScript
All the functionality of the calculator is implemented through JavaScript. We can use this language to listen for events on HTML elements, evaluate mathematical expressions, and update the interface of HTML elements. In the basic section, the calculator contains the basic addition, subtraction, multiplication and division, screen clearing ('C'), delete ('DEL'), and equal ('=') functions. Users can click buttons and arrange them to derive complex mathematical expressions and calculate the results.
In the advanced features section, we added some common functions in mathematics, such as exponents ('e'), natural logarithm ('ln'), x to the y power, square root (√), and trigonometric functions ('sin', 'cos', 'tan'). These have made our calculator more powerful.
var display = document.getElementById('display');
function appendToScreen(btnVal) {
display.value += btnVal;
}
function clearScreen() {
display.value = '';
}
function deleteCharacter() {
if (display.value) {
display.value = display.value.slice(0, -1);
}
}
// 符号按钮点击事件
document.getElementById("buttons").addEventListener("click", function(e) {
if(e.target.matches("button")) {
var btnVal = e.target.innerText;
switch(btnVal) {
case '=':
try {
var result = new Function('return ' + display.value)();
display.value = result.toString();
} catch(err) {
display.value = "错误";
}
break;
case '+':
case '-':
case '*':
case '/':
case '.':
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
appendToScreen(btnVal);
break;
}
}
});
// 控制键点击事件
document.getElementById("control-keys").addEventListener("click", function(e) {
if(e.target.matches("button")) {
var btnVal = e.target.innerText;
switch(btnVal) {
case 'C':
clearScreen();
break;
case 'DEL':
deleteCharacter();
break;
}
}
});
// 高级运算按钮点击事件
document.getElementById("advanced-buttons").addEventListener("click", function(e) {
if(e.target.matches("button")) {
var op = e.target.innerText;
var curVal = parseFloat(display.value);
switch(op) {
case 'e^x':
display.value = Math.exp(curVal).toString();
break;
case 'e':
display.value = Math.E.toString();
break;
case 'ln':
display.value = Math.log(curVal).toString();
break;
case 'x^y':
display.value = `Math.pow(${curVal}, y)`; // 这里假设y是想要使用的变量
break;
case '√':
display.value = Math.sqrt(curVal).toString();
break;
case 'sin':
var rad = curVal * (Math.PI / 180); // 把角度转换为弧度
display.value = Math.sin(rad).toString();
break;
case 'cos':
var rad = curVal * (Math.PI / 180); // 把角度转换为弧度
display.value = Math.cos(rad).toString();
break;
case 'tan':
var rad = curVal * (Math.PI / 180); // 把角度转换为弧度
display.value = Math.tan(rad).toString();
break;
}
}
});V Result Displaying
VI Summary
Through this project, I gained unique experience including process control, UI layout, event handling, data entry and validation, error handling, and more. More importantly, I learned how to bring different technologies together to create a Web application that is both beautiful and fully functional.
I also encountered some challenges during development, such as dealing with floating-point accuracy issues, dealing with the computational priorities of complex expressions, and providing user-friendly error prompts. The process of solving these problems has improved our programming skills, as well as a deeper understanding of the details and how these techniques work.
1473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
