JavaScript Calculator

Create a folder and name it Calculator. Inside this folder create three files first one is index.html, second style.css and third one is script.js and copy and paste the following code properly inside your files.

HTML

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div id="container">
    <div id="display">
      <p>
        <span id="previousInput"></span>
        <span id="operation"></span>
        <span id="current"></span><br><br>
        <span id="Result">0</span>
      </p>
    </div>
    <button class="item delete">D</button>
    <button class="item clear">CE</button>
    <button class="item operator">/</button>
    <button class="item">1</button>
    <button class="item">2</button>
    <button class="item">3</button>
    <button class="item operator">*</button>
    <button class="item">4</button>
    <button class="item">5</button>
    <button class="item">6</button>
    <button class="item operator">-</button>
    <button class="item">7</button>
    <button class="item">8</button>
    <button class="item">9</button>
    <button class="item operator">+</button>
    <button class="item dot">.</button>
    <button class="item">0</button>
    <button class="item equal">=</button>
  </div>
</body>
</html>

				
			

CSS

				
					body{
  margin: 0;
  padding: 0;
  font-family: montserrat, sans-serif;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
#container{
  display: grid;
  grid-template-columns: auto auto auto auto;
  width: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}#display{
  grid-column: 1/5;
  background: rgba(0,0,0,0.7);
  color: white;
  text-align: right;
  padding: 10px 20px;
}
.clear{
  grid-column: 2/4
}
.item{
  padding: 20px;
  border: none;
  font-size: 18px;
  font-family: montserrat, sans-serif;
  margin: 0.5px;
}
.equal{
  grid-column: 3/5
}
#Result{
  font-size: 22px;
}

				
			

JavaScript

				
					window.onload = function(){
  const buttons = document.querySelectorAll('button');
  const previousInput = document.querySelector('#previousInput');
  const operation = document.querySelector('#operation');
  const current = document.querySelector('#current');
  const Result = document.querySelector('#Result');

  let firstInput = '';
  let secondInput = '';
  let operator = ''
  let currentInput = ''


  buttons.forEach(function(btn){
    btn.addEventListener('click',function(){

      // delete button
      if( btn.className.match('delete') ){

        currentInput = currentInput.slice(0, -1);
        Result.innerText = currentInput;

      }

      // clear all btn
      else if( btn.className.match('clear') ){

        firstInput = '';
        secondInput = '';
        operator = ''
        currentInput = ''
        Result.innerText = '0'
        previousInput.innerText ='';
        operation.innerText = '';
        current.innerText = '';
      }

      // operator
      else if( btn.className.match('operator') ){


        if( secondInput === ''){
          firstInput = currentInput;
          operator = btn.innerText;
          previousInput.innerText = firstInput;
          operation.innerText = operator;
          Result.innerText ='0';
          currentInput = ''

        }
        
      }

      // dot period
      else if( btn.className.match('dot') ){

        if( currentInput.indexOf('.') === -1 ){

          Result.innerText += '.';
          currentInput+='.'

        }else {
          return;
        }

      }

      // equal
      else if( btn.className.match('equal') ){
        secondInput = currentInput;
        current.innerText = secondInput;
        let result = eval( firstInput + operator + secondInput );
        Result.innerText = result;
      }

      // number
      else{

        currentInput += btn.innerText
        Result.innerText= currentInput;

      }


    });
  });
}

				
			

Leave a Reply

Your email address will not be published.