Javascript Simple Calculator Project

Hey guys in this post, we will create a simple javascript calculator that performs basic math operations like addition, subtraction, multiplication, and division. The project live on the web, you can take look at deployment here.

Topics covered

This application involves the following topics –

  • DOM Manipulation
  • Control Structures
  • Array.forEach()
  • Javascript CSS Manipulation
  • eventListeners
  • Immediately Invoked Function Expressions

Complete source code

The below image shows you the project structure –


Add styles to the application

Create a main.css file and add the following content

 margin: 0;
 padding: 0;
 box-sizing: border-box;

 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;


 flex: 0 0 95%;
 width: 100%;
 font-size: 7rem;
 padding: 0.5rem;
 background: rgb(41,41,56);
 color: white;

 display: flex;
 flex-wrap: wrap;
 transition: all 0.5s linear;

 flex:0 0 25%;
 border: 1px solid black;
 padding: 0.25rem 0;
 transition: all 2s ease;
 background: blue;
 background: rgb(245,146,62);
 color: white;
 background: rgb(224,224,224);
 font-size: 4rem;
 background: green;
 background: red;

Add scripts to the application

Create an app.js file and add the following content

//Wrap code in an IIFE
  let screen = document.querySelector('.screen');
  let buttons = document.querySelectorAll('.btn');
  let clear = document.querySelector('.btn-clear');
  let equal = document.querySelector('.btn-equal');
  //retrieve data from numbers that are clicked
    button.addEventListener('click', function(e){
      let value =;
      screen.value += value;
  equal.addEventListener('click', function(e){
    if(screen.value === ''){
      screen.value = 'Please Enter a Value';
    } else {
      let answer = eval(screen.value);
      screen.value = answer;
  clear.addEventListener('click', function(e){
    screen.value = '';
})(); //end IIFE

Add HTML to the application

Create an index.html file and add the following content

<!DOCTYPE html>
<html lang="en">

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="main.css">

 <section class="calculator">
   <input type="text" name="" id="" class="screen">
  <div class="buttons">
   <!-- yellow -->
   <button type="button" class="btn btn-yellow" data-num="*">*</button>
   <button type="button" class="btn btn-yellow" data-num="/">/</button>
   <button type="button" class="btn btn-yellow" data-num="-">-</button>
   <button type="button" class="btn btn-yellow" data-num="+">+</button>
   <!-- grey buttons -->
   <button type="button" class="btn btn-grey" data-num=".">.</button>
   <button type="button" class="btn btn-grey" data-num="9">9</button>
   <button type="button" class="btn btn-grey" data-num="8">8</button>
   <button type="button" class="btn btn-grey" data-num="7">7</button>
   <button type="button" class="btn btn-grey" data-num="6">6</button>
   <button type="button" class="btn btn-grey" data-num="5">5</button>
   <button type="button" class="btn btn-grey" data-num="4">4</button>
   <button type="button" class="btn btn-grey" data-num="3">3</button>
   <button type="button" class="btn btn-grey" data-num="2">2</button>
   <button type="button" class="btn btn-grey" data-num="1">1</button>
   <button type="button" class="btn btn-grey" data-num="0">0</button>
   <button type="button" class="btn-equal btn-grey">=</button>
   <button type="button" class="btn-clear btn-grey">C</button>
 <script src="./app.js"></script>





Download the complete source code from github repository

Original source

About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *