Make a Simple Calculator Using JavaScript

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

 

Component of This Simple Calculator

The calculator contains the following components:

You Can Do Addition (+), Subtraction (-), Multiplication (*), and Divide (/) on this calculator.

Display screen: You can see your result on the display screen in calculator

Clear Button: You can clear or erase your calculation data by clicking this clear button.

Calculation button (=): You can do calculation by this calculate(=) button.

 

How to create a simple javascript calculator

First create three files for create a calculator in javascript.

  • index.php
  • style.css
  • script.js
Add HTML

Use this code for making structure of calculator.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title> Simple Calculator</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: blue;" /> </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: blue;" /> </td>
            <td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>
         </tr>
      </table>
      <script type="text/javascript" src="script.js"></script>
   </body>
</html>

 

Add CSS

Use this code for making the calculator stylish.

.calculator {
    padding: 10px;
    border-radius: 5px;
    height: 380px;
    width: 400px;
    margin: auto;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
    background-color: #fff;
    border: solid black 1px;
    color: black;
    font-size: 20px;
    width: 100%;
    height: 60%;
}

.button {
    background-color: #000;
    color: white;
    border: 1px solid #000;
    width: 100%;
    border-radius: 3px;
    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;
}
Add JavaScript

Use javascript for this calculator running

// 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;

}

 

Output

Leave a Comment

Your email address will not be published.