DEV Community

Cover image for How to develop A simple js calculator using HTML CSS and Javascript
Zeenat Parveen
Zeenat Parveen

Posted on

How to develop A simple js calculator using HTML CSS and Javascript

#javascript #html #calculator #tutorial

How to develop A simple js calculator using HTML CSS and Javascript

cal

This calculator will help you to perform basic arithmetic operations addition, subtraction, multiplication, and division.
Live demo

Source Code:Github

prerequisite:

A basic understanding of HTML, CSS, and javascript makes it easy to understand the logic of this calculator.

Technologies used:

  • HTML(Structure Building)
  • CSS(Designing/Presentation)
  • JavaScript(Logic Implemetation)

You must have an editor to write code. I will highly recommend you to use Visual Studio Code for coding.VS Code is my most used and favorite editor.

Let's Get Started:

  • index.html
  • Style.css
  • Script.js

    Let's Break Down Structure

Here is a graphical representation of the structure. This calculator basically designed by using the concept of flex and Grid layouts.
By using these layouts it becomes very easy to responsive your web app very easily.
html

Step 1: Lets Design Calulator Using HTML and CSS

  • HTML(hypertext Markup Language) is the standard markup language used to create basic structure of the website.
  • CSS (Cascading Style Sheets) describes how HTML elements are to be displayed on screen. It can control the layout of multiple web pages all at once.


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"  type="text/css">
    <title>Calculator</title>
</head>
Enter fullscreen mode Exit fullscreen mode
  • External CSS with name style.css linked with html by using <link> tag to design calculator app.
  • Content in <title> tag will be shown in the browser's title bar or in the page's tab


 <div class="container">
<!-- Heading  -->
<!-- Display Screen-->
<!-- Buttons-->
</div>
Enter fullscreen mode Exit fullscreen mode

.Container 

    Outer container conatins All elements of calculator like calculator headind, display screen and buttons.
Enter fullscreen mode Exit fullscreen mode 


.container{        
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    max-width: 250px;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #4f9b9440;
    box-shadow: rgba(214, 238, 236, 0.25) 0px 30px 60px -12px inset, rgba(15, 161, 130, 0.3) 0px 18px 36px -18px inset;
  }
Enter fullscreen mode Exit fullscreen mode 


Display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
Enter fullscreen mode Exit fullscreen mode

Display properties are used to set the direction of elements from inner side of container and align them in center of the container.



 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
Enter fullscreen mode Exit fullscreen mode

postion properties are used to set the container in center of the media screen.

#display

Display screen is the representation of input numbers, Operators and their results



<input type="text" name="number" id="display" readonly>
Enter fullscreen mode Exit fullscreen mode 


#display{
position: relative;
width: 98%;
border: none;
outline: none;
text-align: right;
font-size: 1.5rem;
font-weight: bold;
background-color:white;
}
Enter fullscreen mode Exit fullscreen mode

readonly proprty restrict the use of text input. It will display values instead of taking direct input from the user. text-align:right property used to align numbers to the right side of the display screen.

.grid-container

This container consist of all input buttons having numbers and operators



<div class="grid-container">       
<!-- grid Items -->
</div>
Enter fullscreen mode Exit fullscreen mode 


.grid-container {    
  display: grid;
  width: 100%;
  grid-template-columns: auto auto auto auto;
  justify-content: center;  
  padding: 3px;
}
.grid-item {
  padding: 5px 10px;  
  width:59px ;
  outline: none;
  margin: 0.5px;
  font-size: 1.5rem;
  text-align: center;
  border: none;
  box-shadow: rgba(182, 182, 211, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
Enter fullscreen mode Exit fullscreen mode

Grid container is used to fix button in rows and columns.To use grid layout display: grid property is used. grid-template-columns:auto auto auto auto will decide there will be four columns in one row. Each button in grid container is designed and maintained by using grid-item class.

Row 1: 



  <!-- row 1 -->
            <button class="grid-item plus">+</button>
            <button class="grid-item minus">-</button>
            <button class="grid-item multiply">*</button>
            <button class="grid-item divide">/</button>
Enter fullscreen mode Exit fullscreen mode
  • In row 1 there are four buttons having values +, -, *, / respectively.
  • These are basic arithmetic operators used in calculation. 


.plus{
  background-color:#F79F1F;
}
.minus{
  background-color: #A3CB38;
}
.multiply{
background-color: #D980FA;
}
.divide{
  background-color: #FFC312;

}
Enter fullscreen mode Exit fullscreen mode

.plus,.minus,.multiply and .divide classes applying different colors to buttons. Different color scheme make this calculator more eye catchy.

Row 2: 



<!-- row 2 -->
            <button class="grid-item">7</button>
            <button class="grid-item">8</button>
            <button class="grid-item">9</button>
            <button class="grid-item equal">=</button>
Enter fullscreen mode Exit fullscreen mode

In row 2 there are four buttons having values 7, 8, 9 and = operator. .equal class used to design exqal button.



 .equal{
  background-color: #29696b;
  color: white;
  grid-row: span 4; 
}
Enter fullscreen mode Exit fullscreen mode

grid-row: span 4 property expands the equal button to the 4 rows.

Row 3:



 <!-- row 3 -->
            <button class="grid-item">4</button>
            <button class="grid-item">5</button>
            <button class="grid-item">6</button>
Enter fullscreen mode Exit fullscreen mode

Row 4:



<!-- row 4 -->
            <button class="grid-item">1</button>
            <button class="grid-item">2</button>
            <button class="grid-item">3</button>
Enter fullscreen mode Exit fullscreen mode

Row 5:



<!-- row 5 -->
            <button class="grid-item">0</button>
            <button class="grid-item">.</button>
            <button class="grid-item">C</button>
Enter fullscreen mode Exit fullscreen mode

Row 3, 4 and 5 consist of value 4,5,6 , 1,2,3 , 0,.,C respectively.

active selector



.grid-item:active{
  background-color: #757474;
}
Enter fullscreen mode Exit fullscreen mode

:active selector is used to selecting and styling the active element. An element becomes active when you click on it. when grid items clicked their background color turns into grey.

Step 2: Let's Implement javascript logic:

Methodology:

When you click on a button

  • If is a number (0-9) or operator (+,-,*,/) it will be concatenated into the display screen.
  • If it is an equal(=) button then the expression in the display screen be evaluated and show the result in the display screen.
  • If it is ( C ) it will reset the calculator and set the screen value to 0.
  • If it is (.) it will concatenate to the display screen one time in one operand.

First of all, you have to take control of the HTML element. You will use selectors to call these inputs and store them in a variable.
querySelector() returns the Element within the document that matches the specified selector.



 const screenValue = document.querySelector("#display")
Enter fullscreen mode Exit fullscreen mode

By using id selector display screen will b accessed and assign to the screenValue variable.



 const buttonValue = document.querySelectorAll("button")
Enter fullscreen mode Exit fullscreen mode

To access all button document.querySelectorAll("button") is used and assigned this to the buttonValue variable.
As we do console.log(buttonValue) it shows NodeList of all Buttons

allnodes



 buttonValue.forEach(element => {
    element.addEventListener('click', e => {


        let buttonText = e.target.innerText;
        });
     });
Enter fullscreen mode Exit fullscreen mode
  • forEach() callback method is used to access all node items and add click event listener.
  • let buttonText = e.target.innerText; access value of clicked button and store it in buttonText variable.

Note:

  • Expression is the combination of operators and operands.
  • There is only one operator between two operands.
  • Only + and - operators can be a prefix of number.
  • Only one . is allowed in one operand


 function refreshCalculator() {
    isOperator = true;
    isdot = false;
    isNumber = true;
    screenValue.value = "0"
}

 if (buttonText === "C") {
            refreshCalculator();
        }
Enter fullscreen mode Exit fullscreen mode

if user click on C button it will refresh calculator setting and reset screen value to 0.
isOperator=true and isNumber=true means it user can enter a number or an operator.isDot=false means there is no precision in operand.



 else if (buttonText === '.' && !isdot) {
            screenValue.value += buttonText;
            isdot = true;
        }
Enter fullscreen mode Exit fullscreen mode

If user click on . button isdot wil be checked. if there is no percision in value . will be concatenate and make isdot=true.it ensure the duplication of percision in operand because only one . is allowed in one value.



  else if (buttonText === '+' && isOperator) {
            // checking if display screen vaule is not equal to zero operator will b concatenate like 23+
            if (screenValue.value != '0') {
                screenValue.value += buttonText;
            }
            //if display value is 0 then + will be add as prefix of the operand
            else {
                screenValue.value = buttonText;
            }
            isOperator = false;
            isNumber = true;
            isdot = false;

        }
Enter fullscreen mode Exit fullscreen mode
  • if user clicks on + button isOperator will be checked if there is already an operator no more operator will be added otherwise operator will be added.
  • if display screen vaue is 0 and user enter + operator. The opertor will be added as prefix on the left side of the operand otherwise it will be concatenated on the right side of the operand.
  • Now its time to set the values of boolean isOperator=false which means no more operators will b concatenated until another operand will be added.
  • isNumber=true means user can enter another operand.
  • isdot=false means user can add . in another operand.


 else if (buttonText === '-' && isOperator) {
            if (screenValue.value != '0') {
                screenValue.value += buttonText;
            }
            else {
                screenValue.value = buttonText;
            }
            isOperator = false;
            isNumber = true;
            isdot = false;
        }
Enter fullscreen mode Exit fullscreen mode
  • if user click on - button isOperator will be checked if there is already an operator no more operator will be added otherwise operator will be added.
  • if display screen vaue is 0 and user enter - operator. The opertor will bs added as prefix on the left side of the operand otherwise it will be concatenated on the right side of the operand.
  • Now its time to set the values of boolean isOperator=false which means no more operators will b concatenated until another operand will be added.
  • isNumber=true means user can enter another operand.
  • isdot=false means user can add . in another operand.


 else if (buttonText === '*' && isOperator) {
            if (screenValue.value != '0') {
                screenValue.value += buttonText;
                isOperator = false;
                isNumber = true;
                isdot = false;
            }
Enter fullscreen mode Exit fullscreen mode
  • if user click on * button isOperator will be checked if there is already an operator no more operator will be added otherwise operator will be added.
  • * can never be used as prefix operator so it will only be concatenated if the display screen having value > 0
  • Now its time to set the values of boolean isOperator=false which means no more operators will b concatenated until another operand will be added.
  • isNumber=true means user can enter another operand.
  • isdot=false means user can add . in another operand. 


   else if (buttonText === '/' && isOperator) {
            if (screenValue.value != '0') {
                screenValue.value += buttonText;
                isOperator = false;
                isNumber = true;
                isdot = false;
            }

        }
Enter fullscreen mode Exit fullscreen mode
  • If user click on / button isOperator will be checked if there is already an operator no more operator will be added otherwise operator will be added.
  • / can never be used as prefix operator so it will only be concatenated if the display screen having value > 0
  • Now its time to set the values of boolean isOperator=false which means no more operators will b concatenated until another operand will be added.
  • isNumber=true means user can enter another operand.
  • isdot=false means user can add . in another operand. 


   else if (buttonText >= '0' && buttonText <= 9 && isNumber) {
            if (buttonText === '0' && screenValue.value === '0') {
            //do nothing.
            }
            else if (screenValue.value === '0') {
            //conver the 0 to the button value
                screenValue.value = buttonText;
            }
            else {
            //append 0 into the value
                screenValue.value += buttonText;
            }
            // allow user to add operator after operand 
            isOperator = true;
        }
Enter fullscreen mode Exit fullscreen mode
  • Values from ( 0-9 ) will b inserted and concatenated.
  • If buttonText === '0' && screenValue.value === '0' it will do nothing maens display screen value will remain 0.
  • If screenValue.value === '0' but buttonText > 0 then display screen value will be equal to buttonText value.
  • Otherwise 0 will be append display screen value.


  else if (buttonText === '=') {
            screenValue.value = eval(screenValue.value)

            isNumber = false;
        }
Enter fullscreen mode Exit fullscreen mode

If user click = button display screen expression will be evaluated and result will b shown in display screen.

When all the individual components are pieced together, we have a fully functional calculator. Now you can play with it.
If you are ready to do more, then:

try to add some more buttons like backspace which clears the last character.
or add some more operators like the remainder operator (%). Just play with it...
I hope you enjoyed this tutorial.

If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below. Thank you ;)

Recommendation:

Whether you are building a calculator in JavaScript or 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 project you are going to build, How it works, what will be the input and desired output, it will lead you to the code.

Top comments (2)

Collapse
 
arnurk profile image
Arnur-K •

0.1 + 0.2 = ?

Collapse
 
zeeizee profile image
Zeenat Parveen •

i will try to solve this soon

Read next

krivanek06 profile image

Creating Custom rxResource API With Observables

Eduard Krivanek -

alexis_clarembeau_8c3c0e2 profile image

How are responsive websites doing in 2024?

Alexis Clarembeau -

thevediwho profile image

Dark Mode for iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi -

harshm03 profile image

React Router: Concepts and Practical Guide(Part 1)

Harsh Mishra -