Free Calculator HTML Code

Do you want to create a simple calculator in HTML? well, this free code snippet helps you to create a calculator in HTML, CSS, and JavaScript. It comes with a stylish interface to perform calculations on numbers.

Create HTML code for Calculator

1. In the first step, create the HTML code for the calculator as follows:

<div class="container calculator">
    <div class="screen-item screen"> <span>screen</span></div>
    <dl class="touche__box">
      <dt class="clear-item"> <span>clear</span></dt>
      <dt class="touche__box-item"> <span class="soustraction">_</span></dt>
      <dt class="touche__box-item"><span class="sign">+</span></dt>
      <dt class="touche__box-item clearme"> <span>7</span></dt>
      <dt class="touche__box-item"> <span>8</span></dt>
      <dt class="touche__box-item"> <span>9</span></dt>
      <dt class="touche__box-item"><span class="sign">/</span></dt>
      <dt class="touche__box-item"> <span>4</span></dt>
      <dt class="touche__box-item"> <span>5</span></dt>
      <dt class="touche__box-item"> <span>6</span></dt>
      <dt class="touche__box-item"><span class="sign">x</span></dt>
      <dt class="touche__box-item"> <span>1</span></dt>
      <dt class="touche__box-item"> <span>2</span></dt>
      <dt class="touche__box-item"> <span>3</span></dt>
      <dt class="equal-item"><span class="sign-equal">=</span></dt>
      <dt class="touche__box-item zero-item"> <span>0</span></dt>
      <dt class="touche__box-item un-item"><span class="sign">.</span></dt>
    </dl>
</div>  

2. After that, create the CSS styles for the calculator. You can add your own CSS properties to customize the calculator interface.

.calculator {
  width: 408px;
  height: 837px;
  margin: 10px auto;
  position: relative;
  color: #fff;
  font-size: 3em;
}
.screen-item {
  position: absolute;
  width: 352px;
  height: 90px;
    line-height: 90px;
  background: #ff7f24;
  border: 1px solid #fff;
  top: 0px;
  left: 28px;
  text-align: right;
  
}
.screen-item span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.screen-item .error {
  color: #f00;
  border: 1px solid;
/* padding: 10px 60px; */
  border-radius: 5px;
  display: block;
  width: 73%;
  font-size: 1em;
  text-align: center;
  font-weight: bold;
  background: #fff;
  font-size: 0.8em;
  padding: 20px 11px;
  line-height: 1.2;
}
.touche__box {
  position: relative;
  top: 91px;
  left: 27px;
}
.touche__box span {
  width: 100%;
  height: 100%;
  display: block;
  text-indent: 29px;
  line-height: 2.1;
}
.touche__box span.soustraction {
  line-height: 1.5;
}
.touche__box .touche__box-item {
  width: 85px;
  height: 96px;
  background-color: #ffd6d6;
  font-weight: bold;
  color: #ff7f24;
  float: left;
  position: relative;
  margin: 2px;
}
.touche__box .clear-item {
  width: 173px;
  height: 95px;
  background: #53e4ed;
  border: 1px solid #fff;
  float: left;
  position: relative;
  margin: 2px;
}
.touche__box .clear-item span {
  text-indent: 35px;
  line-height: 1.99;
}
.touche__box .zero-item {
  width: 174px;
  height: 96px;
}
.touche__box .zero-item span {
  text-indent: 79px;
}
.touche__box .zero-item,
.touche__box .un-item {
  position: relative;
  margin-top: -97px;
}
.touche__box .equal-item {
  width: 85px;
  height: 96px;
  background-color: #ea2131;
  float: left;
  position: relative;
  margin: 2px;
  height: 194px;
}
.touche__box .equal-item span {
  line-height: 4;
}
.touche__box .clearme {
  clear: both;
}

3. At last, add the following JavaScript calculator program between <script> and </script> tag before closing the body tag.

//Generate by BABEL -:)
//Distributed by CodeHim (www.codehim.com)
'use strict';

//DESIGN
//loading page: 
//en meme temps
//page blanche vers page noir
//iphone cocke noir vers iphone cocke blanche
//https://tympanus.net/codrops/2016/10/12/animated-decorative-lines/
(function () {

  var arrSign = ['-', '+', '/', '*', 'x'],
      arr = [],
      result = 0,
      printCalcul = '',
      arrSort = void 0,
      strSign = void 0,
      error = void 0,
      screen = document.querySelector('.screen span'),
      ele = document.querySelectorAll('.touche__box-item > span'),
      equal = document.querySelector('.sign-equal'),
      clear = document.querySelector('.clear-item  span');

  //operation
  for (var i = 0; i < ele.length; i++) {
    ele[i].addEventListener('click', function (e) {
      var cible = e.target.innerHTML === '_' ? cible = '-' : e.target.innerHTML;
      //on memorise dans le tableau
      arr.push(cible);
      //printCalcul display the screen
      printCalcul += cible;
      screen.innerHTML = printCalcul;
      e.preventDefault();
    });
  }
  clear.addEventListener('click', function (e) {
    screen.innerHTML = 'screen';
    arr.splice(0, arr.length);
    printCalcul = '';
    screen.classList.remove('error');
    e.preventDefault();
  });

  error = function error(strSignMessage) {
    screen.innerHTML = 'err with sign ' + strSignMessage;
    screen.classList.add('error');
  };

  equal.addEventListener('click', function (e) {
    result = 0;
    strSign = arr.join('');
    //return an array with the number together
    arrSort = strSign.match(/(\d+)|\D/g); //[ '4', '-', '94', '-', '8' ]
    for (var _i = 0, l = arrSort.length; _i < l; _i++) {
      var current = arrSort[_i],
          prev = arrSort[_i - 1],
          next = arrSort[_i + 1];
      prev = prev !== undefined && arrSign.indexOf(prev) === -1 ? parseInt(prev, 10) : '';
      next = next !== undefined && arrSign.indexOf(next) === -1 ? parseInt(next, 10) : '';
      //debugger
      //
      // if value current it's a sign: +-/*x 
      if (arrSign.indexOf(current) >= 0) {
        if (current === '+') {
          if (_i === 1) {
            //if is the first sign +-/* we're count the prev and next element
            result = prev + next;
            //console.log(result + ' : ' + i + ' : ' + arrSort[i] + ' : ' + arrSort[j] );
          } else if (_i > 1) {
            result += next;
            //console.log(result + ' : ' + i + ' : ' + arrSort[i+1]);
          } else if (_i === 0) {
            error('+');
            break;
          }
        }
        if (current === '-') {
          if (_i === 1) {
            //first sign +-/*
            result = prev - next;
            //console.log(result + ' - ' + ' : ' + i + ' : ' + arrSort[i] + ' : ' + arrSort[j] );
          } else if (_i > 1) {
            result -= next;
            //console.log(result + ' - ' +' : ' + i + ' : ' + arrSort[i+1]);
          } else if (_i === 0) {
            error('-');
            break;
          }
        }
        if (current === 'x') {
          if (_i === 1) {
            //first sign +-/*
            result += prev * next;
          } else if (_i > 1) {
            result *= next;
            //console.log(result + ' * ' +' : ' + i + ' : ' + arrSort[i+1]);
          } else if (_i === 0) {
            error('*');
            break;
          }
        }
        if (current === '/') {
          if (_i === 1) {
            //first sign +-/*
            result += prev / next;
          } else if (_i > 1) {
            result /= next;
          } else if (_i === 0) {
            error('/');
            break;
          }
        }
      }
    }
    if (!screen.classList.contains('error')) {
      screen.innerHTML = result;
    }
    e.preventDefault();
  }); //end click equal
})(); //END

That’s all! I hope you have successfully integrated this simple calculator in your HTML projects. If you have any questions or suggestions, let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.