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 | Make a visual easy calculator |
MU STU ID and FZU STU ID | 21124477_832101201 |
I. Introduction
In this blog post, I will explain how I completed a visual calculator with addition, subtraction, multiplication, division, squares, square root, parentheses, and simple trigonometric operations. This calculator can be opened through the web page, convenient and fast.
II. PSP table
**Personal Software Process Stages** | Estimated Time(minutes) | Actual Time(minutes) |
Planning | ||
• Estimate | 60 | 75 |
Development | ||
• Analysis | 25 | 30 |
• Design Spec | 8 | 8 |
• Design Review | 5 | 8 |
• Coding Standard | 25 | 20 |
• Design | 15 | 10 |
• Coding | 200 | 230 |
• Code Review | 60 | 30 |
• Test | 15 | 10 |
Reporting | ||
• Test Repor | 65 | 70 |
• Size Measurement | 10 | 10 |
• Postmortem & Process Improvement Plan | 40 | 45 |
**Sum** | 468 | 516 |
III. Problem-solving ideas
I got relevant information from Bilibili website, CSDN website and Baidu. To implement a simple calculator for visualization, I found the following ways:
i. Use existing calculator libraries or frameworks:
Search for and use existing calculator libraries or frameworks, such as JavaScript's Math.js or jQuery calculator plug-ins. These libraries and plug-ins have provided the basic functions and interface of the calculator, making it possible to quickly implement a simple visual calculator.
ii. Use programming languages and graphics libraries:
Use a programming language (e.g., Python, Java, C++, etc.) and graphics libraries (e.g., Tkinter, JavaFX, Qt, etc.). This approach requires some programming knowledge and skills.
iii. Use Web technologies:
Another simple and widely available solution is to use Web technologies such as HTML, CSS, and JavaScript. Use HTML to create the calculator's interface, CSS to style the interface, and JavaScript to write the calculator's logic and interaction. This method does not require the installation of additional software or libraries, and can be run directly in the browser.
iv. Determination method
By understanding the difficulty of the above mentioned code and combining my own ability, I choose Web technology, that is, HTML+CSS+JS. I integrated the Code of the three parts into the same software platform, using Visual Studio Code.
IV. Design and implementation process
i. Interface design:
Design a user-friendly interface so that users can enter numbers and operators and view the results of calculations. Use HTML and CSS to create and style interface elements. According to my personal preference, I set the background color of the web page to blue, the background color of the calculator to pink, the edge of the calculator to purple, and the keys to gray. I adjusted the size of the calculator and its position on the web page step by step to get the current look. The following is the CSS module code.
// Web background design
body {
font-family: Arial, sans-serif;
background-color: #69b0ebc0;
text-align: center;
}
//Computer page design
.calculator {
width: 300px;
margin: 150px auto;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center;
background-color: pink;
box-shadow: 0 0 10px rgb(153, 61, 235);
}
//Result display field
#result {
width: 90%;
margin-bottom: 10px;
padding: 5px;
}
//Button area style design
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
padding: 5px;
}
ii. User input:
We need to obtain user input, including numbers and operators. The JavaScript programming language can be used to listen for user click events and store the input value in a variable.
In the following HTML module code, we use <input> Element to display the result of the calculation, using the <button> Element to define the calculator's button. Each button is bound to a corresponding JavaScript function, which will be implemented in the next steps.
//User input design
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="deleteLastChar()">←</button>
<button onclick="appendChar('(')">(</button>
<button onclick="appendChar(')')">)</button>
<button onclick="appendChar('7')">7</button>
<button onclick="appendChar('8')">8</button>
<button onclick="appendChar('9')">9</button>
<button onclick="appendChar('/')">/</button>
<button onclick="appendChar('4')">4</button>
<button onclick="appendChar('5')">5</button>
<button onclick="appendChar('6')">6</button>
<button onclick="appendChar('*')">*</button>
<button onclick="appendChar('1')">1</button>
<button onclick="appendChar('2')">2</button>
<button onclick="appendChar('3')">3</button>
<button onclick="appendChar('-')">-</button>
<button onclick="appendChar('.')">.</button>
<button onclick="appendChar('0')">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendChar('+')">+</button>
<button onclick="calculateSquare()">x²</button>
<button onclick="calculateSquareRoot()">√</button>
<button onclick="calculatesin()">Sin</button>
<button onclick="calculatecos()">Cos</button>
</div>
<h1>Wangxinyi's calculator</h1>
</div>
iii. Calculation logic:
We need to implement the basic calculation logic of the calculator, including addition, subtraction, multiplication, division, square and other operations. The JavaScript programming language is used to implement this logic and compute the result when the user clicks on the equal sign. JavaScript Math.js provides me with the basic functions of the calculator and the framework of the interface implementation, which is very convenient.
//Calculation result
function clearResult() { //Clear interface
document.getElementById("result").value = '';
} //Gets a reference to an HTML element. Use JS built-in libraries to achieve computing functions, and so on
function deleteLastChar() { //Delete a character
let result = document.getElementById("result").value;
document.getElementById("result").value = result.slice(0, -1);
}
function appendChar(char) {
let result = document.getElementById("result").value;
document.getElementById("result").value = result + char;
}
function calculateResult() {
let result = document.getElementById("result").value;
let calculatedResult = eval(result);
document.getElementById("result").value = calculatedResult;
}
function calculateSquare() {
let result = document.getElementById("result").value;
let calculatedResult = eval(result) ** 2;
document.getElementById("result").value = calculatedResult;
}
function calculateSquareRoot() {
let result = document.getElementById("result").value;
let calculatedResult = Math.sqrt(eval(result));
document.getElementById("result").value = calculatedResult;
}
function calculateCos() {
try {
result.value = Math.cos(eval(result.value));
} catch (error) {
result.value = 'ERROR';
}
}
function calculateSin() {
try {
result.value = Math.sin(eval(result.value));
} catch (error) {
result.value = 'ERROR';
}
}
</script>
iv. Program flow chart of basic operation
v. A link to the full project code in GITHUB
vi. State diagram
State diagram is a graphical representation of system state and state transition tool. The following is an example of a simple state diagram to show the state and state transitions of a calculator.
V. Results display
i. Basic functions
Implementation of basic budget functions, including addition, subtraction, multiplication and division, decimal point.
计算器基础应用
ii. Additional functions
Implementation of additional functions, including simple trigonometric functions, square, square root, bracket operations.
附加功能
VI. Deficiencies and future prospects of this calculator
i. Insufficiency of function
Although it includes basic addition, subtraction, multiplication, division, and decimal point operations, sin and cos, squares, and parentheses operations, it lacks some advanced functions, such as exponential operations, hierarchy, π, and so on.
ii. Future outlook
We can further optimize the code and algorithms to improve the performance and stability of the calculator. At the same time, we can also consider extending the calculator function to mobile devices to meet the needs of different users.
In short, through continuous improvement and innovation, we can make this simple calculator project more complete, provide a better user experience and more rich features.
VII. Summary
In this assignment, my achievements are as follows:
(1) I learned and understood the html, css and javascript of front-end web development, and improved my programming ability.
(2) Understand the purpose of GITHUB and master the use method.
(3) Learned to publish CSDN blog, exercised the ability of analysis and summary.
(4) Improved my ability to practice independently. Before that, I had never developed and produced any software project independently.
In general. Very much harvest! It was a valuable experience.