Build a Calculator using JavaScript, HTML and CSS in 2024

As we progress in learning a new programming language or development framework, applying skills to real-world projects is crucial. I’ve realized that Building a project using the newly acquired technology or framework is an excellent way to test our understanding and enhance our abilities. 

Check out our free courses related to software development.

One popular project idea is to Build a Calculator using the programming language you’re studying. While this project may seem straightforward, it can present challenges that help solidify your language understanding and improve your problem-solving skills. 

Rather than sticking to generic project suggestions like a To-do List, I find that tackling a project like building a Calculator not only enhances my understanding of the language but also makes the learning experience more practical and enjoyable.

Shall we get started?

Before that, Check out Full Stack Development Bootcamp (JS/MERN) – Job Guaranteed from upGrad

Logic Before Everything Else

When you start working on a project, whether it is a calculator or a to-do list, the first thing you need to identify is the logic.

How does the calculator work?

1. You add two or more numbers (any number of digits) using the number keys given on the calculator.
2. You then perform fundamental arithmetic functions, i.e. addition, subtraction, multiplication and division on these numbers.
3. The calculator should be able to calculate and give out the correct solutions.

This is the premise of your calculator tool. So you need a keypad, a display unit and function elements. 

The “equals to” button will evaluate the answer while the “clear” button will ensure the removal of all the inputs on the calculator display. 

Check out upGrad’s Java Bootcamp

upGrad’s Exclusive Software and Tech Webinar for you –

SAAS Business – What is So Different?

Features of the Calculator:

If you are interested to know how to make a calculator using HTML CSS and javascript, you should first learn its features. These features are inevitable for developing a simple calculator using HTML CSS javascript. Moreover, a simple calculator using HTML CSS javascript tries to incorporate some of the essential features of these three technologies. Here is the list of features for calculator HTML CSS javascript.

• It can perform basic arithmetic operations like addition, subtraction, multiplication, and division.
• It can perform decimal operations.
• The calculator HTML CSS javascript displays Infinity if you divide any number by zero.
• The calculator in HTML CSS javascript will not display any result when there is an invalid expression. For instance, 6++8 will not display any result.
• The clear screen feature clears the display screen whenever you want.

Components of the Calculator

If you want to stay away from confusion on how to make a calculator using HTML CSS and javascript, go through the below list of components.

 Mathematical Operators:

• Addition (+)
•  Subtraction (-)
• Multiplication (*)
• Division (/)

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

Display Screen: This component of the calculator in HTML CSS javascript displays the mathematical expression and the result.

Clear Screen Button: It clears all the mathematical values.

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

Learn Online software development courses from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs, or Masters Programs to fast-track your career.

Tackling the Project: Key to Building the Code

Instead of heading to the code right away, you need to learn how to tackle a new project. You have two things ready for you: the logic and a basic understanding of the front-end technologies, i.e. JavaScript, HTML, and CSS. 

Before you begin building your calculator using JavaScript, you need the following:

1. An Integrated Development Environment that will help you build your project using all three technologies. 
2. A local server that will help you test your codes and remove the bugs. As a result, you will be able to launch the application faster and with greater agility. 

Our learners also read: Free java course!

#1 Getting Started with HTML

The first step is to get your hands a bit dirty with HTML so that you have built the outline for your calculator. 

There are ten buttons on the calculator, ranging from 0 to 9. HTML is responsible for building the keys for each digit.

Apart from this, you will need to use HTML to create separate keys for the different arithmetic functions as well when building a calculator using JavaScript.

You can use HTML to add the button to display the entered digits or the results as well as to clear the display.

The visual unit of your calculator is entirely dependent on HTML and CSS, of which the buttons and their IDs need to be created using HTML. For creating IDs and buttons and styling later on, the calculator HTML CSS javascript code is helpful.

The following calculator HTML CSS javascript code helps you get started with HTML:

 The Boilerplate Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <title>Calculator</title>

</head>

 

<body>

The Actual Code for Creating the Calculator Outline

(

  <!-- calculator -->

  <div class="calculator">

 

    <!-- display -->

    <input type="text" class="display" disabled>

    <!-- keys -->

    <div class="keys">

      <!-- 4 rows of keys -->

      <div class="row">

        <button value="7">7</button>

        <button value="8">8</button>

        <button value="9">9</button>

        <button value="+" class="operator">+</button>

      </div>

      <div class="row">

        <button value="4">4</button>

        <button value="5">5</button>

        <button value="6">6</button>

        <button value="-" class="operator">-</button>

      </div>

      <div class="row">

        <button value="1">1</button>

        <button value="2">2</button>

        <button value="3">3</button>

        <button value="*" class="operator">*</button>

      </div>

      <div class="row">

        <button value="C" class="operator">C</button>

        <button value="0">0</button>

        <button value="/" class="operator">/</button>

        <button value="=" class="operator">=</button>

      </div>

    </div>

  </div>

  <!-- calculator body ends -->

  <script type="text/javascript" src="js/script.js"></script>

</body>

</html>

Learn: Top 20 Javascript Projects in Github For Beginners

#2 Style with CSS

Once you have defined the structure for the calculator, you will use the inline CSS elements to style your calculator and make it visually appealing and easy-to-use. 

While inline CSS is excellent when it comes to designing and styling your app’s appearance, it may not be SEO friendly. Apart from this, you can also use external CSS elements by tagging them to the same root directory. You can even use internal or embedded CSS elements that are present within the <style></style> tags within the head section.

The first thing to do when developing a calculator using HTML CSS and javascript is to make sure the calculator doesn’t go too wide. After you add the styles to the output and buttons of the calculator using HTML CSS and javascript, this is expected to happen.

Here, we will take you through the code that you can use to style your calculator. 

(You can create variations to this code if you want.)

/* common styles */

* {

  padding: 0;

  margin: 0;

}

body {

  width: 100vw;

  height: 100vh;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #222831;

  

}

/* common styles end */

/* calculator */

.calculator {

  width: 300px;

  padding-bottom: 15px;

  border-radius: 7px;

  background-color: #000;

  box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);

}

/* calculator style end */

/* display */

.display {

  width: 100%;

  height: 80px;

  border: none;

  box-sizing: border-box;

  padding: 10px;

  font-size: 2rem;

  background-color: #00ff44;

  color: #000;

  text-align: right;

 border-top-left-radius: 7px;

 border-top-right-radius: 7px;

}

/* display style end */

/* row */

.row {

  display: flex;

  justify-content: space-between;

}

/* row style end */

/* button */

button {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  border: none;

  outline: none;

  font-size: 1.5rem;

  background-color: #222;

  color: #fff;

  margin: 10px;

}

button:hover {

  cursor: pointer;

}

/* button style end */

/* operator */

.operator {

  background-color: #00ff44;

  color: #000;

}

/* operator style end */

Making this calculator more playful:

By now, you have understood a major part of how to make calculator using HTML CSS and javascript.  Since we now have a base style to work with, it is quick and easy to make certain small changes and entirely update the appearance of this calculator.

This calculator using HTML CSS javascript can be made more playful by transforming the buttons into circles rather than rectangles. If you are clear with how to make calculator using HTML CSS and javascript, you can proceed with making it more playful. For that, you need to change certain lines of CSS code.

Firstly, let’s make the buttons into circles. For that, you must ascertain that they have identical width and height. Padding can’t be used because every character and number has a slight difference in size; thus, they can create some contradictions.

So, you need to remove the padding and add in height (block-size) and width (inline-size). Next, add a border-radius of 60px in the following code of calculator using HTML CSS javascript.

 .calculator__keys {

  background: hsl(210, 35%, 85%);

  border: none;

  font-size: 2rem;

  /* Playful CSS Styles: */

  inline-size: 80px;

  block-size: 80px;

  border-radius: 60px;

}

 Now it is essential to add some white space near the buttons. Also, in this calculator with HTML CSS and javascript, the equals button must be fixed. It must span four rows which are not feasible currently because the height (also known as the block-size)is set to 80px. To fix that, you can alter its height to auto.

 With these two changes, the CSS code appears below:

.calculator__keys {

  padding: 0.5rem; /* Adds some whitespace near the keys */

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-gap: 1px;

  background: hsl(207, 19%, 61%);

}

.calculator__keys {

  background: hsl(210, 35%, 85%);

  border: none;

  font-size: 2rem;

  /* CSS Playful Styles: */

  inline-size: 80px;

  block-size: 80px;

  border-radius: 60px;

  margin: 0.25rem;

}

.calculator__key--enter {

  grid-column: 4 / 5;

  grid-row: 2 / span 4;

  background: hsl(350, 100%, 70%);

  height: auto; /* Permits the key to span the four rows */

}

The output of the above code of the calculator with HTML CSS and javascript isn’t focused on design. But it must be fixed. Moreover, the output and the buttons’ background are of different colors. The following code implements those changes:

 Let’s make both of those changes:

.calculator {

  color: hsl(202, 11%, 29%); /* Shows calculator’s text color*/

}

.calculator__output {

  background: hsl(255, 100%, 100%); /* Changes background color to white */

  padding-block-start: 2rem; /* Adds white space above the output text */

  padding-inline-end: 1.25rem; /* Adds more padding to the text’s right side */

}

.calculator__keys {

  background: hsl(255, 100%, 100%); /* Changes  background behind the keys to white color*/

}

#3 Adding Functionality with JavaScript

We have now discussed in detail the visible aspects of building a calculator using JavaScript. Let’s do some scripting to help make the calculator functional and perform the calculation tasks. We will understand the few steps that are involved in building the JS code, which will help you develop the code faster. 

• You will need to call the HTML tags that you have created for individual functions using JavaScript. You will use selectors to call each of these inputs and store them in a variable. For each function, you will need a variable. For instance, there is a separate variable for display, the digits, clearing function as well as equal to function. The getElementbyID() function can be used in this case.
• Let’s say you want to perform a simple calculation of 20+30, you will call 20 first using the method mentioned above. Before calling 30 and the arithmetic function, you will need to store the previously called 20 somewhere. Your code should make space for the temporary storage of the numbers to make calculations easy. An empty array will hold the number as a string. Once you have added the other number and the arithmetic function, using eval(), you can evaluate the numbers and get the answer. 
• When you click on the buttons in the calculator, you want some results, either they are displayed, or they are evaluated. For this purpose, you should add event listeners to your code. This way, the buttons will listen to the click. When you add functions to the event listeners, they will automatically perform the task on the click sound.
• The display unit should return the value of the button that you click. You can use event.target object, as it will return the value of the element on which the event has occurred. For instance, you want the number “1” displayed as soon as you click on it. For this, you will need to store the number in the form of a variable. Using the “if” function, you will compare the existing variable to identify if it is zero or not. In case it is a zero, then you will append it to an empty string so that no number begins with a zero. Lastly, you will add the contents of the key “1” to the display variable. As a result, as soon as the number key is triggered, you will see the contents in the display box.
• Lastly, you need to create the function that will help apply mathematical operations to the displayed numbers. Make sure your calculator in JavaScript can perform the mathematical calculations with ease. To enable this functionality, you can use a combination of syntaxes and methods. We have specified the code for the JavaScript elements below for your perusal.

// select all the buttons

const buttons = document.querySelectorAll('button');

// select the <input type="text" class="display" disabled> element

const display = document.querySelector('.display');

// add eventListener to each button

buttons.forEach(function(button) {

  button.addEventListener('click', calculate);

});

// calculate function

function calculate(event) {

  // current clicked buttons value

  const clickedButtonValue = event.target.value;

  if (clickedButtonValue === '=') {

    // check if the display is not empty then only do the calculation

    if (display.value !== '') {

      // calculate and show the answer to display

      display.value = eval(display.value);

    }

  } else if (clickedButtonValue === 'C') {

    // clear everything on display

    display.value = '';

  } else {

    // otherwise concatenate it to the display

    display.value += clickedButtonValue;

  }

}

Must Read: Java Architecture & Components Explained

The calculator functions:

The next important thing is to define various operations that the calculator would perform. The foremost one is the clear() function that clears different variables’ values. Another method is delete() which clears a single number in the calculator using javascript and HTML.

You can create a function that decides what will happen whenever a user clicks on a number to add to the display. This function is appendNumber(number). The chooseOperation(operation) function helps to control what will happen whenever a user clicks on any operation button. The compute() function accepts the values in your calculator and shows the result. The updateDisplay() function helps you to update the values within the output.

After defining all important operations, you can consider using various properties the calculator using javascript and HTML requires to store. You must determine the previous operand entered by the user, the operand they are working on currently, and the operation they have chosen.

Summing Up

Whether you are building a calculator in JavaScriptor working on a more complex project, the idea is to break down the contents in a logical and construed manner. This will help you derive the exact syntax and will lead to a fluid web application. Instead of starting with coding directly, try to understand what is the real purpose of the technology you are using, and it will lead you to the code.  

If you’re interested to learn more about Java, full-stack software development, I recommend to check out upGrad & IIIT-B’s Executive PG Programme in Software Development – Specialisation in Full Stack Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects, and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.