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.
Similar Code Snippets:

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.