Building a Web-Based Calculator Based On JavaScript

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.