Introduction
In the digital age, web applications are an integral part of our everyday lives. From simple task managers to complex data analytics tools, the web offers a platform for creating diverse applications. One such fundamental application is the web-based calculator. In this article, I’ll create a basic but fully functional web-based calculator using HTML, CSS, and JavaScript.
Calculators are ubiquitous tools with a wide range of applications, from simple arithmetic calculations to complex scientific functions. Building a web-based calculator from scratch provides an excellent opportunity to explore web development concepts, including user interface design and JavaScript programming.
Information Table
The Link Of Class | https://bbs.csdn.net/forums/ssynkqtd-04 |
---|---|
Link of Requirement of This Assignment | https://bbs.csdn.net/topics/617332156 |
The Aim of This Assignment | Web Visual Calculator |
MU STU ID and FZU STU ID | 21125813(MU)/832101118(FZU) |
You can also use this link to find my Github: https://github.com/P0larN1ghT/Visual-calculator
Project process
PSP Form
Personal Software Process Stages | Estimated Time (minutes) | Actual Time (minutes) |
---|---|---|
Planning | ||
• Estimate | 40 | 60 |
Development | ||
• Analysis | 20 | 25 |
• Design Spec | 30 | 35 |
• Design Review | 15 | 20 |
• Coding Standard | 10 | 10 |
• Design | 45 | 50 |
• Coding | 90 | 120 |
• Code Review | 30 | 45 |
• Test | 30 | 35 |
Reporting | ||
• Test Report | 15 | 20 |
• Size Measurement | 10 | 15 |
• Postmortem & Process Improvement Plan | 50 | 60 |
Sum | 385 | 495 |
Description of Problem-Solving Ideas
The process of solving the problem and building the calculator involved several key steps:
Understanding the Requirements
The first step was to understand the project requirements. This included identifying the basic and advanced features the calculator needed to support, such as arithmetic operations, trigonometric functions, exponentiation, and degrees-to-radians conversion.
Research and Planning
After understanding the requirements, I conducted research on JavaScript’s eval function for mathematical calculations and trigonometric functions. I also planned the project by breaking it down into smaller tasks, estimating the time required for each task, and creating a PSP form.
Project Structure
I organized the project into three main files: calculator.html
for the HTML structure, calculator.css
for styling, and calculator.js
for the JavaScript logic. This separation of concerns made the code more maintainable and easy to understand.
Design and HTML Structure
I designed the calculator’s user interface using HTML. This involved creating an input field for displaying results and a grid of buttons for user input. The HTML structure was kept clean and semantically meaningful.
Styling with CSS
CSS was used to style the calculator, making it visually appealing and responsive. Different button styles were applied to differentiate between operators, trigonometric functions, and other buttons.
JavaScript Logic
The core functionality of the calculator was implemented in JavaScript. This included handling user input, parsing expressions, performing calculations, and updating the display. Error handling was also implemented to handle invalid expressions.
Testing and Debugging
Throughout the development process, I tested the calculator to ensure that it correctly handled various mathematical expressions, trigonometric functions, and degrees-to-radians conversion. Debugging was performed to fix any issues that arose during testing.
Design and Implementation Process
Design
The design of the calculator focused on creating a clean and user-friendly interface. The HTML structure was designed with simplicity in mind, with an input field for display and a grid of buttons for user input. CSS was used for styling, making the calculator visually appealing.
Flowchart of Key Functions
A flowchart was created to visualize the key functions of the calculator:
Code Description
HTML (calculator.html)
First, we defined the HTML structure, which contains an input box for displaying the results of the calculation and a set of buttons for entering numbers, operators, and functions. Each button has an associated onclick event that triggers the corresponding JavaScript function by clicking the button.
<!-- HTML code goes here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="open-parenthesis" onclick="appendToDisplay('(')">(</button>
<button class="close-parenthesis" onclick="appendToDisplay(')')">)</button>
<button class="trig" onclick="appendToDisplay('* Math.PI / 180')">deg</button>
<button class="operator" onclick="appendToDisplay('**')">^</button>
<button class="trig" onclick="appendToDisplay('Math.sin(')">sin</button>
<button class="trig" onclick="appendToDisplay('Math.cos(')">cos</button>
<button class="trig" onclick="appendToDisplay('Math.tan(')">tan</button>
<button class="equal" onclick="calculate()">=</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('*')">*</button>
<button class="operator" onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button class="clear" onclick="clearDisplay()">C</button>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
CSS(calculator.css)
We use CSS to define the look and style of the calculator to enhance the user experience. In this example, we define different colors and styles for different types of buttons (operators, clear, equals, trigonometric functions, etc.). This helps users more easily distinguish between different types of buttons.
<!-- CSS code goes here -->
body {
font-family: Arial, sans-serif;
}
.trig {
background-color: #f39c12;
color: #fff;
}
.operator {
background-color: #3498db;
color: #fff;
}
.calculator {
width: 350px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
input[type="text"] {
width: 90%;
margin-bottom: 10px;
padding: 10px;
font-size: 18px;
}
button {
width: 70px;
height: 40px;
font-size: 18px;
margin: 5px;
cursor: pointer;
}
.operator {
background-color: #f0f0f0;
}
.clear {
background-color: #ff6347;
color: #fff;
}
.equal {
background-color: #4caf50;
color: #fff;
}
JavaScript(calculator.js)
<!-- JavaScript code goes here -->
let displayValue = '';
function appendToDisplay(value) {
displayValue += value;
document.getElementById('display').value = displayValue;
}
function toRadian() {
if (displayValue.includes('deg')) {
displayValue = displayValue.replace('deg', '* Math.PI / 180');
} else {
displayValue += '* Math.PI / 180';
}
}
function calculate() {
if (displayValue.includes('deg')) {
toRadian();
}
try {
displayValue = eval(displayValue).toFixed(2);
document.getElementById('display').value = displayValue;
} catch {
document.getElementById('display').value = 'Error';
}
}
function clearDisplay() {
displayValue = '';
document.getElementById('display').value = displayValue;
}
Displaying Result Functions
The screenshot above shows the calculator’s user interface. Users can input mathematical expressions, trigonometric functions, and perform calculations. The display area shows both input and results.
Summary
In this assignment, we successfully designed and implemented a feature-rich JavaScript calculator. It supports basic arithmetic operations, advanced functions like trigonometry, and degrees-to-radians conversion. We followed a structured development process, including planning, design, coding, and testing.
Building this calculator helped reinforce key web development skills, including HTML, CSS, and JavaScript. It also emphasized problem-solving abilities and the importance of effective planning and documentation in software development.
This project serves as a valuable example of how to create interactive web applications and demonstrates the power of JavaScript for mathematical computations.