Calculator Based on IDEA and Vscode
一.introduction
This is a homework on software engineering
which we will make a web version of the visual calculator, this calculator includes addition, subtraction, multiplication, division, zero and other functions.
Linked to git
二.Assignment Table
| Linked of Class | https://bbs.csdn.net/forums/ssynkqtd-04 |
|---|---|
| Link of Requirement of This Assignment | http://t.csdnimg.cn/mt5IU |
| Aim of This Assignment | Create a web version of the visual calculator |
| MU STU ID and FZU STU ID | 21127077 832102107 |
PSP form
| Personal Software Process Stages | Estimated Time（minutes） | Actual Time（minutes） |
|---|---|---|
| Planning | 110 | 120 |
| • Estimate | 80 | 90 |
| Development | 120 | 130 |
| • Analysis | 30 | 40 |
| • Design Spec | 15 | 15 |
| • Design Review | 10 | 10 |
| • Coding Standard | 30 | 45 |
| • Design | 10 | 20 |
| • Coding | 20 | 20 |
| • Code Review | 20 | 20 |
| • Test | 20 | 23 |
| Reporting | 120 | 100 |
| • Test Report | 0 | 0 |
| • Size Measurement | 0 | 0 |
| • Postmortem & Process Improvement Plan | 50 | 70 |
| Sum | 635 | 703 |
三.Design and Implement
1.Choose a programming language: First, you need to choose the programming language used to create the calculator.
2.Designing a user interface: Designing an attractive user interface is crucial for creating a visually appealing calculator. You can use VSCode to write GUI code and use selected GUI libraries to create interface elements such as buttons, text boxes, and labels.
3.Add buttons and text boxes: Create a user interface that includes numeric buttons, operator buttons, and a text box for displaying inputs and results. You can use the layout manager of the 4.GUI library to arrange these elements to ensure a beautiful and easy-to-use interface.
Implementing computational logic: In calculator applications, you need to implement basic mathematical logic such as addition, subtraction, multiplication, and division. Based on user input, perform appropriate calculations and display the results in a text box.
5. Add advanced features: If you want to make the calculator more powerful, you can add some advanced features such as bracket support, scientific calculation, history recording, etc.
Beautify the interface: Use the style options provided by the GUI library to beautify the calculator interface. You can change the color, font, size, and appearance of the buttons, as well as the text box, to ensure that the calculator looks attractive.
6. Testing and debugging: Conduct testing and debugging in the calculator application to ensure that all its functions work properly. VSCode provides powerful debugging tools to help you find and solve problems
四.Problem
When we first ran the code with Vscode, some plug-in errors resulted in the following page
Finally, I successfully used IDEA and later learned that:
1.Different development environment configurations: IDEA (IntelliJ IDEA) and VSCode (Visual Studio Code) are different integrated development environments, and they may differ in default configurations and supported plugins. Ensure that you use the same configuration and plugins in both IDEs.
2.Language and Framework Differences: If you are developing different projects, it may involve different programming languages and frameworks. Some pages may depend on specific language features or frameworks, so they may behave differently in different IDEs. Ensure that you have used appropriate language and framework settings in both IDEs.
3.Browser compatibility: Pages may behave differently in different browsers. IDEA and VSCode may use different built-in or integrated browsers, which may cause page display issues in one of the IDEs. Make sure you test the page in the same browser.
4.Caching and Historical Data: Sometimes, IDEA and VSCode may cache page data or historical data, which may cause display issues. Attempt to clear the cache of IDEA and VSCode, and then reload the page.
5.Plugins or extensions: If you use different plugins or extensions in the IDE, they may affect the display of the page. Disable or uninstall plugins that may cause problems, and then reload the page.
五.codeSection
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="calculator dark">
<div class="theme-toggler active">
<i class="toggler-icon"></i>
</div>
<div class="display-screen">
<div id="display"></div>
</div>
<div class="buttons">
<table>
<tr>
<td><button class="btn-operator" id="clear">C</button></td>
<td><button class="btn-operator" id="/">÷</button></td>
<td><button class="btn-operator" id="*">×</button></td>
<td><button class="btn-operator" id="backspace"><</button></td>
</tr>
<tr>
<td><button class="btn-number" id="7">7</button></td>
<td><button class="btn-number" id="8">8</button></td>
<td><button class="btn-number" id="9">9</button></td>
<td><button class="btn-operator" id="-">-</button></td>
</tr>
<tr>
<td><button class="btn-number" id="4">4</button></td>
<td><button class="btn-number" id="5">5</button></td>
<td><button class="btn-number" id="6">6</button></td>
<td><button class="btn-operator" id="+">+</button></td>
</tr>
<tr>
<td><button class="btn-number" id="1">1</button></td>
<td><button class="btn-number" id="2">2</button></td>
<td><button class="btn-number" id="3">3</button></td>
<td rowspan="2"><button class="btn-equal" id="equal">=</button></td>
</tr>
<tr>
<td><button class="btn-operator" id="(">(</button></td>
<td><button class="btn-number" id="0">0</button></td>
<td><button class="btn-operator" id=")">)</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
body{
font-family: sans-serif;
}
a{
text-decoration: none;
color: #fff;
}
body{
background-image: linear-gradient(to bottom right, rgba(79, 51, 176, 1), rgba(210, 53, 165));
}
.container{
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
}
.calculator{
position: relative;
height: auto;
width: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 30px #000;
}
.theme-toggler{
position: absolute;
top: 30px;
right: 30px;
color: #fff;
cursor: pointer;
z-index: 1;
}
.theme-toggler.active{
color: #333;
}
.theme-toggler.active::before{
background-color: #fff;
}
.theme-toggler::before{
content: '';
height: 30px;
width: 30px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #333;
z-index: -1;
}
#display{
margin: 0 10px;
height: 150px;
width: auto;
max-width: 270px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 30px;
overflow-x: scroll;
}
#display::-webkit-scrollbar{
display: block;
height: 3px;
}
button{
height: 60px;
width: 60px;
border: 0;
border-radius: 30px;
margin: 5px;
font-size: 20px;
cursor: pointer;
transition: all 200ms ease;
}
button:hover{
transform: scale(1.1);
}
button#equal{
height: 130px;
}
/* 白天主题 */
.calculator{
background-color: #fff;
}
.calculator #display{
color: #0a1e23;
}
.calculator button#clear{
background-color: #ffd5d8;
color: #fc4552;
}
.calculator button.btn-number{
background-color: #c3eaff;
color: #000;
}
.calculator button.btn-operator{
background-color: #ffd0fd;
color: #f967f3;
}
.calculator button.btn-equal{
background-color: #adf9e7;
color: #000;
}
/* 夜间主题 */
.calculator.dark{
background-color: #071115;
}
.calculator.dark #display{
color: #f8fafd;
}
.calculator.dark button#clear{
background-color: #2d191e;
color: #bd3740;
}
.calculator.dark button.btn-number{
background-color: #1b2f38;
color: #f8fafb;
}
.calculator.dark button.btn-operator{
background-color: #2e1f39;
color: #aa00a4;
}
.calculator.dark button.btn-equal{
background-color: #223323;
color: #fff;
}
JS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
body{
font-family: sans-serif;
}
a{
text-decoration: none;
color: #fff;
}
body{
background-image: linear-gradient(to bottom right, rgba(79, 51, 176, 1), rgba(210, 53, 165));
}
.container{
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
}
.calculator{
position: relative;
height: auto;
width: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 30px #000;
}
.theme-toggler{
position: absolute;
top: 30px;
right: 30px;
color: #fff;
cursor: pointer;
z-index: 1;
}
.theme-toggler.active{
color: #333;
}
.theme-toggler.active::before{
background-color: #fff;
}
.theme-toggler::before{
content: '';
height: 30px;
width: 30px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #333;
z-index: -1;
}
#display{
margin: 0 10px;
height: 150px;
width: auto;
max-width: 270px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 30px;
overflow-x: scroll;
}
#display::-webkit-scrollbar{
display: block;
height: 3px;
}
button{
height: 60px;
width: 60px;
border: 0;
border-radius: 30px;
margin: 5px;
font-size: 20px;
cursor: pointer;
transition: all 200ms ease;
}
button:hover{
transform: scale(1.1);
}
button#equal{
height: 130px;
}
/* 白天主题 */
.calculator{
background-color: #fff;
}
.calculator #display{
color: #0a1e23;
}
.calculator button#clear{
background-color: #ffd5d8;
color: #fc4552;
}
.calculator button.btn-number{
background-color: #c3eaff;
color: #000;
}
.calculator button.btn-operator{
background-color: #ffd0fd;
color: #f967f3;
}
.calculator button.btn-equal{
background-color: #adf9e7;
color: #000;
}
/* 夜间主题 */
.calculator.dark{
background-color: #071115;
}
.calculator.dark #display{
color: #f8fafd;
}
.calculator.dark button#clear{
background-color: #2d191e;
color: #bd3740;
}
.calculator.dark button.btn-number{
background-color: #1b2f38;
color: #f8fafb;
}
.calculator.dark button.btn-operator{
background-color: #2e1f39;
color: #aa00a4;
}
.calculator.dark button.btn-equal{
background-color: #223323;
color: #fff;
}
六.Result Show
20231008_215031
Version2
Added trigonometry, floating-point, sqrt and a PI (Π).(Keepinf two decimals)
It has the function of transforming color
dark-color:
White color
20231010_122521
七.Summary
-
Basic skills improvement: Creating a calculator is a great opportunity for you to review and consolidate the basic knowledge of HTML, CSS, and JavaScript. You can practice creating HTML form elements, applying CSS styles, and writing JavaScript code to handle user input.
-
Interaction design considerations: The interaction design of calculators is crucial for the user experience. It is important to learn how to consider how users interact with calculators, layout buttons, and display results. This allows you to experience the importance of user interface design.
-
Practical problem-solving: In a project, you may encounter various problems, such as handling user input, accuracy of calculation results, and responsiveness of the interface. Solving these problems will enhance your problem-solving skills.
-
Project management: Creating a small front-end application requires organization and planning. You can learn how to build a project structure, organize code files, and manage different parts of the project.
Future improvement and learning opportunities:
-
Add advanced features: If you want to delve deeper into learning, you can consider adding some advanced features, such as support for parentheses, historical records, scientific calculation functions, etc. This will challenge your programming skills and make calculators more powerful.
-
Improve UI/UX: You can improve the user interface and experience of the calculator. Try different color schemes, fonts, and button styles to make the calculator more attractive and easy to use.
-
Mobile responsiveness: There may be issues with the display of calculators on mobile devices. Learn how to achieve mobile responsiveness so that calculators can display well on different screen sizes.
-
Unit testing: Learn how to write unit tests to ensure that all parts of the calculator work properly. This is an important development skill that is helpful for building maintainable applications.
-
Cross browser compatibility: Browser compatibility is a challenge as different browsers may interpret HTML, CSS, and JavaScript in different ways. Learn how to handle cross browser compatibility issues
47
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
