Coding hints

How to create a calculator using HTML, CSS and Javascript

Can one create a calculator using HTML, CSS and Javascript only? Yes, you can and here we have a sample code you can use. You are free to modify the styles to your taste.

It is said “practice makes perfect’! If you are learning HTML, CSS and Javascript, then only by practising via the creation of simple projects will you get a good mastery of these different coding languages.

Our project sample here is creating a basic calculator using just HTML, CSS and Javascript. This calculator will be able to;

  1. perform basic arithmetic operations like addition, subtraction, division, and multiplication.
  2. perform decimal operations.
  3. display Infinity if you try to divide any number by zero.
  4. It will not display any result in case of an invalid expression. For example, 5++9 will not display anything.
  5. Clear screen feature to clear the display screen anytime you want.

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 clears all mathematical values.
  • Calculate button (=): It evaluates the mathematical expression and returns the result.

Our project structure

As we are to use HTML, JS and CSS for this project, one can decide to create only a single HTML file with the CSS code placed in the head section of the document and the javascript placed just before the closing body tag.

Another approach will be creating three separate files in our project root directory;

In this example, we will go with the second approach.

Steps to follow

To create a calculator using HTML, CSS, and JavaScript, you can follow these steps:

  1. Create a new HTML file and add a basic layout for the calculator using HTML and CSS. You can use buttons to represent the numbers and operations.
  2. Add JavaScript code to handle user input and perform the necessary calculations. You can use event listeners to detect when the user clicks on a button and update the display accordingly.
  3. Implement the logic for the calculator operations such as addition, subtraction, multiplication, and division. You can use JavaScript functions to perform the calculations.

Here’s the project sample code to get you started. You can use a simple editor like Notepad++ for this.

The CSS code to place in your style.css file:

@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%;
}

#btn {
    background-color: #fb0066;
}

input[type=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;
}

input:active[type=button] {
    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 Javascript Code: Now create another file say “script.js” and paste the following code in it then save;

// 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 returns result
function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

HTML: Create a file named say “calculator.html” paste the following code inside and save.

<!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 clears all the values -->
    <td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
  </tr>
  <tr>
    <!-- display() function displays the value of clicked button -->
    <td> <input type="button" value="1" onclick="display('1')" /> </td>
    <td> <input type="button" value="2" onclick="display('2')" /> </td>
    <td> <input type="button" value="3" onclick="display('3')" /> </td>
    <td> <input type="button" value="/" onclick="display('/')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="4" onclick="display('4')" /> </td>
    <td> <input type="button" value="5" onclick="display('5')" /> </td>
    <td> <input type="button" value="6" onclick="display('6')" /> </td>
    <td> <input type="button" value="-" onclick="display('-')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="7" onclick="display('7')" /> </td>
    <td> <input type="button" value="8" onclick="display('8')" /> </td>
    <td> <input type="button" value="9" onclick="display('9')" /> </td>
    <td> <input type="button" value="+" onclick="display('+')" /> </td>
  </tr>
  <tr>
    <td> <input type="button" value="." onclick="display('.')" /> </td>
    <td> <input type="button" value="0" onclick="display('0')" /> </td>
 
    <!-- calculate() function evaluates the mathematical expression -->
    <td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
    <td> <input type="button" value="*" onclick="display('*')" /> </td>
  </tr>
</table>
 
<script type="text/javascript" src="script.js"></script>
 
</body>
 
</html>

Once you’ve done as described above, you should have something like this;

Recommended for you:

You can make an HTTP request in Javascript via various methods depending on the JavaScript module you use. Here we will be telling you ...
If you are looking for a way to create a responsive iframe for embedding documents with HTML and CSS on your website, then this ...
Creating web games with HTML5
Creating web games with HTML5 is a popular and effective way to develop games that can be played directly in a web browser. HTML5 ...
There are many online tools nowadays one can use to convert images for free. Here, we will be showing you how you can create ...
Back to top button

Adblock Detected!

Hello, we detected you are using an Adblocker to access this website. We do display some Ads to make the revenue required to keep this site running. please disable your Adblock to continue.