How to make a Calculator using HTML, CSS and JavaScript

 HTML, CSS and JavaScript are the three core languages used in web development. And you can even make your own Calculator using these coding languages. 

In today's tutorial, we won't be talking blogging, How to do this or that on Blogger, but how to make a Calculator using HTML, CSS and JavaScript. If you are eager to know how this can be done, then read this article till the very end.

JavaScript programming language is the most commonly used language for calculators. But with just the JavaScript alone, one can't really make the design and styles. So, we will be using HTML, and CSS as well.

Before you dive into the steps proper, not that;

1. This is just a basic Calculator with basic operations like addition, subtraction, division and multiplication.
2. The Calculator will also have a delete or clear button

making a Calculator using HTML, CSS and JavaScript

For this tutorial, we will split the work into three different parts. Writing the HTML code, Styling the Calculator UI with CSS and adding the JavaScript code which will help us execute all the different Maths operations.

Writing the HTML code

The HTML code below is written in such a way that the calculator has a title or let's say it's model or brand, the section where all the input operations will be displayed, the answer display area, the different function buttons as well as all the different numeric button. Below is the HTML sample code which you can use and customise as you see fit.

<div class="calc">
  <div class="calc-title">
    <span class="calc-title-span">
      HTMLCalc
    </span>
    <div class="calc-title-hr"></div>
  </div>
  <div class="calc-display">
    <div class="calc-display-span secondary-display" id="secondary-display">
    </div>
    <div class="calc-display-span primary-display" id="display">
    </div>
  </div>
  <div class="calc-display-hr"></div>
  <div class="calc-btn" id="btn">
    <button class="calc-btn-primary" id="seven">7</button>
    <button class="calc-btn-primary" id="eight">8</button>
    <button class="calc-btn-primary" id="nine">9</button>
    <button class="calc-btn-primary btn-bg" id="divide">/</button>
    <button class="calc-btn-primary" id="four">4</button>
    <button class="calc-btn-primary" id="five">5</button>
    <button class="calc-btn-primary" id="six">6</button>
    <button class="calc-btn-primary btn-bg" id="multiply">*</button>
    <button class="calc-btn-primary" id="one">1</button>
    <button class="calc-btn-primary" id="two">2</button>
    <button class="calc-btn-primary" id="three">3</button>
    <button class="calc-btn-primary btn-bg" id="add">+</button>
    <button class="calc-btn-primary btn-bg" id="decimal">.</button>
    <button class="calc-btn-primary" id="zero">0</button>
    <button class="calc-btn-primary btn-bg-equal" id="equals">=</button>
    <button class="calc-btn-primary btn-bg" id="subtract">-</button>
    <button class="calc-btn-clear" id="clear">clear</button>
  </div>
</div>

The CSS code for the calculator

Now let's give our calculator a look that resembles a real calculator. Copy the CSS code below. You can change the colour or even the different CSS classes to match your taste.

 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');
body {
  width : 100%;
  height : 750px;
  display: flex;
  flex-direction : column;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  background-color: #ebedef;
  padding: 0;
  margin: 0;
}

.calc {
  display: flex;
  flex-direction : column;
  width: 330px;
  height: 600px;
  margin : 10px;
  background-color: #080636;
  background-image: linear-gradient(315deg, #080636 0%, #414141 104%);
  border-radius: 20px;
  box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.calc-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  align-items: center;
}

.calc-title-span {
  color: #fb7454;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 20px;
}

.calc-title-hr {
  width: 200px;
  height: 10px;
  background-color: #fb7454;
  opacity: 0.8;
}

.calc-display {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  color: #fff; 
}


.secondary-display{
  font-size:20px;
  opacity : 0.8;
  overflow-x : hidden;
}
/* ScrollBar Style*/
.secondary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.secondary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.secondary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.primary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.primary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.primary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.calc-display-hr {
  width: 250px;
  height: 2px;
  margin-top: 10px;
  align-self: center;
  background-color: #bdbdbd;
  opacity: 0.4;
}

.calc-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 20px;
}

.calc-btn-primary {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  margin: 10px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  width: 60px;
  height: 60px;
  border: 2px solid #616161;
  border-radius: 100%;
}

.btn-bg{
  background-color:#424242 !important;
  opacity : 0.9;
  border : none !important;
}
.btn-bg-equal{
  background-color:#ff7555 !important;
  border : none !important;
}
.calc-btn-primary:focus {
  outline:none
}
.calc-btn-primary:active {
  transform: scale(0.9);
}

.calc-btn-clear {
  margin: 20px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  padding: 10px 90px;
  border: 3px solid #ff7555;
  border-radius: 10px;
}
.calc-btn-clear:active {
  transform: scale(0.9);
}

The Calculator JavaScript code

Now, after you've added the HTML and CSS code, you will get what looks like a basic calculator. But it won't carry out any operations. To fix this, the following JavaSript code is needed. You can add this code before the closing body tag of the HTML file of your project.

<script>
 console.clear();
const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");
let currentString = '';
let resultString = '';
let evalResult;
let lastOperator = false;
const primaryRender = (value) => {
  primaryDisplay.innerText = value;
}

const secondaryRender = (value) => {
  secondaryDisplay.innerText = value;
}
secondaryRender('0');
primaryRender('0');

const evaluate = (e) => {
  let width = secondaryDisplay.scrollWidth;
  if(width > 310){
    secondaryDisplay.style.overflowX = 'scroll';
    secondaryDisplay.scrollLeft = width;
  }
  else{
    secondaryDisplay.style.overflowX = 'hidden';
  }
  
  let value = e.target.innerText;
  if (value >= '0' && value <= '9') {
    let len = currentString.length;
    let lastOp = isOp(currentString[len - 1]);
    if (lastOperator) {
      currentString = currentString.concat(value);
      resultString = "".concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
      lastOperator = false;
    } else {
      currentString = currentString.concat(value);
      resultString = resultString.concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
    }

  } else if (isOp(value)) {
    if (currentString.length == 0 && (value == '/' || value == '*'));
    else {
      resultString = "";
      primaryRender(value);
      lastOperator = true;
      let len = currentString.length;
      let lastOp = isOp(currentString[len - 1]);
      if (lastOp) {
        currentString = currentString.substr(0, len - 1) + value;
        console.log(currentString);
        secondaryRender(currentString);
        decimal = false;
      } else {
        currentString = currentString.concat(value);
        secondaryRender(currentString);
      }
    }

  } else if (value == '.') {
    if (resultString.indexOf('.') < 0) {
      if (resultString.length == 0) {
        currentString = currentString.concat('0.');
        resultString = resultString.concat('0.');
        secondaryRender(currentString);
        primaryRender(resultString);
      } else {
        currentString = currentString.concat(value);
        resultString = resultString.concat(value);
        secondaryRender(currentString);
        primaryRender(resultString);
      }
    }
  } else if (value == '=') {
    secondaryDisplay.style.overflowX = 'hidden';
    
    if (currentString.length == 0);
    else {
      let result = eval(currentString);
      resultString = '';
      currentString = '';
      secondaryRender('0');
      primaryRender(result);
    }
  } else if (value == 'clear') {
    currentString = '';
    resultString = '';
    secondaryRender('0');
    primaryRender('0');
  }
    let width1 = primaryDisplay.scrollWidth;
    if(width1 > 310){
      primaryDisplay.style.overflowX = 'scroll';
    }
    else{
      primaryDisplay.style.overflowX = 'hidden';
    }
}


//Adding Event Listener to all buttons
for (let elem of btns.children) {
  elem.addEventListener('click', evaluate);
}

function isOp(value) {
  return (/\+|\-|\*|\//).test(value);
}

</script>

After adding both the CSS, HTML and JavaScript code and performing some customisations at the level of the CSS, your calculator is ready and can be used.

Demo of this HTML calculator

You can find the live demo of this calculator widget here.

Try it live and modify as you see fit