How To Create A Simple Calculator Using Html And Javascript

The best way to learn JavaScript is to build projects. If you want to become a good web developer, you need to start creating as soon as possible. You can start by building beginner-level projects like a simple calculator, digital clock, stopwatch, etc.

In this article, you'll learn how to make a simple calculator using HTML, CSS, and JavaScript. This calculator can perform basic mathematical operations like addition, subtraction, multiplication, and division.

Let's get started.

Components of the Calculator

The calculator consists of the following components:

Mathematical Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/).

Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .

Display Screen: It displays the mathematical expression and the result.

Clear Screen Button: It clear all mathematical values.

Calculate button (=): It evaluates the mathematical expression and returns the result.

Folder Structure of the Calculator Project

Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here the root folder is named Calculator. According to standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.

HTML Code

Open the index.html file and paste the following code:

          <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
            <meta charset="utf-8">
            <title> Simple Calculator using HTML, CSS and JavaScript </title>
            <link rel="stylesheet" href="styles.css">
</head>
<body>
<table class = "calculator" >
            <tr>
            <td colspan = "3"> <input class = "display-box" type = "text" id = "result" disabled /> </td>
            <!-- clearScreen() function clear all the values -->
            <td> <input class = "button" type = "button" value = "C" onclick = "clearScreen()" style = "background-color: #fb0066;" /> </td>
            </tr>
            <tr>
            <!-- display() function display the value of clicked button -->
            <td> <input class = "button" type = "button" value = "1" onclick = "display('1')" /> </td>
            <td> <input class = "button" type = "button" value = "2" onclick = "display('2')" /> </td>
            <td> <input class = "button" type = "button" value = "3" onclick = "display('3')" /> </td>
            <td> <input class = "button" type = "button" value = "/" onclick = "display('/')" /> </td>
            </tr>
            <tr>
            <td> <input class = "button" type = "button" value = "4" onclick = "display('4')" /> </td>
            <td> <input class = "button" type = "button" value = "5" onclick = "display('5')" /> </td>
            <td> <input class = "button" type = "button" value = "6" onclick = "display('6')" /> </td>
            <td> <input class = "button" type = "button" value = "-" onclick = "display('-')" /> </td>
            </tr>
            <tr>
            <td> <input class = "button" type = "button" value = "7" onclick = "display('7')" /> </td>
            <td> <input class = "button" type = "button" value = "8" onclick = "display('8')" /> </td>
            <td> <input class = "button" type = "button" value = "9" onclick = "display('9')" /> </td>
            <td> <input class = "button" type = "button" value = "+" onclick = "display('+')" /> </td>
            </tr>
            <tr>
            <td> <input class = "button" type = "button" value = "." onclick = "display('.')" /> </td>
            <td> <input class = "button" type = "button" value = "0" onclick = "display('0')" /> </td>
            <!-- calculate() function evaluate the mathematical expression -->
            <td> <input class = "button" type = "button" value = "=" onclick = "calculate()" style = "background-color: #fb0066;" /> </td>
            <td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>
            </tr>
            </table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

The structure of the calculator is created using the <table> tag. The <table> tag contains five rows which represent five horizontal sections of the calculator. Each row is created using the<tr> tag. Each <tr> tag contains <td> tags (Table Data) which holds the display screen and buttons of the calculator.

CSS Code

Open the styles.css file and paste the following code:

          @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
            padding: 10px;
            border-radius: 1em;
            height: 380px;
            width: 400px;
            margin: auto;
            background-color: #191b28;
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
            font-family: 'Orbitron', sans-serif;
            background-color: #dcdbe1;
            border: solid black 0.5px;
            color: black;
            border-radius: 5px;
            width: 100%;
            height: 65%;
}
.button {
            font-family: 'Orbitron', sans-serif;
            background-color: #64278f;
            color: white;
            border: solid black 0.5px;
            width: 100%;
            border-radius: 5px;
            height: 70%;
            outline: none;
}
.button:active {
            background: #e5e5e5;
            -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
            -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
}

The above CSS is used to style the calculator. The.class selector is used for selecting elements with a specific class attribute. The.calculator, .display-box, and .button class selectors are used to style table structure, the display screen, and buttons of the calculator respectively. @import is used to import the Orbitron font-family from Google fonts.

JavaScript Code

Open the script.js file and paste the following code:

          // This function clear all the values
function clearScreen() {
            document.getElementById("result").value = "";
}// This function display values
function display(value) {
              document.getElementById("result").value += value;
}
// This function evaluates the expression and return result
function calculate() {
              var p = document.getElementById("result").value;
              var q = eval(p);
              document.getElementById("result").value = q;
}

Understanding the JavaScript Code

The clearScreen(),display(), andcalculate() functions are used to add functionality to the Calculator.

Clearing Values

The clearScreen() function access the DOM using the id of the result and clear its value by assigning it an empty string.

          function clearScreen() {
            document.getElementById("result").value = "";
}

Displaying Values

display() function accesses the DOM using the id of the result and appends the value of the clicked button to the result.

          function display(value) {
            document.getElementById("result").value += value;
}

Evaluating Expression

The calculate() function accesses the DOM using the id of the result and evaluates the expression using the eval() function. The evaluated value of the expression is again assigned to the result.

Note: Theeval() function is used in JavaScript to evaluate the expression passed to it as a parameter. It returns the evaluated result of the mathematical expression.

          function calculate() {
            var p = document.getElementById("result").value;
            var q = eval(p);
            document.getElementById("result").value = q;
}

If you want to have a look at the complete source code used in this article, here's the GitHub repository. Also, if you want to have a look at the live version of this project, you can check it out through GitHub as well.

Develop Cool Programming Projects

You can raise your engineering skills to the next level by developing projects. Whether you're a beginner or you're getting back into coding after some time off, developing projects can be a big help in boosting your confidence.

You can try out many simple projects like a Chess Game, To-Do List App, Weight Conversion Tool, Tic Tac Toe game, Rock Paper Scissors game, Web Scraper with Python, Login System, Chatbot, Snake game, Tetris game, Tip Calculator, Countdown Clock, URL Shortener, etc.

Get your hands dirty with these projects and become a better developer.

The 10 Best Beginner Projects for New Programmers

Want to learn programming but don't know where to start? These beginner programming projects and tutorials will start you off.