Simple HTML Calculator

Learn how to create simple html calculator inspired by iPhone UI

In this tutorial you are going to learn how to make a very basic html calculator.

The user interface is inspired by the calculator app in iphone.

Lets Begin

So what exactly do we need to create the user interface?

We need some basic things like some buttons and a text input for displaying the values.

In this tutorial I am using css grid to arrange the display and buttons in their corresponding places.

If you are new to html and don't know the basics of it take a look at this website.

Pre-requisites 

For the font I am using Roboto Mono from Google Fonts. To include that into the webpage we need to add the google font link in the head section of the html file.

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300&display=swap" rel="stylesheet">

In this tutorial I am using external css and javascript files with the names style.css and script.js respectively. To include that also we have to write the following code in the head section.

<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

Part:1 The GUI

The HTML code:

<div class="container">
  <input class="output div1" type="text" id="result" />
  <input class="button div2" type="button" value="C" onclick="clr()" />
  <input class="button div3" type="button" value="±" onclick="changeSign()" />
  <input class="button div4" type="button" value="<" onclick="back()" />
  <input class="button div5" type="button" value="÷" onclick="dis('/')" />
  <input class="button div6" type="button" value="7" onclick="dis('7')" />
  <input class="button div7" type="button" value="8" onclick="dis('8')" />
  <input class="button div8" type="button" value="9" onclick="dis('9')" />
  <input class="button div9" type="button" value="×" onclick="dis('*')" />
  <input class="button div10" type="button" value="4" onclick="dis('4')" />
  <input class="button div11" type="button" value="5" onclick="dis('5')" />
  <input class="button div12" type="button" value="6" onclick="dis('6')" />
  <input class="button div13" type="button" value="-" onclick="dis('-')" />
  <input class="button div14" type="button" value="1" onclick="dis('1')" />
  <input class="button div15" type="button" value="2" onclick="dis('2')" />
  <input class="button div16" type="button" value="3" onclick="dis('3')" />
  <input class="button div17" type="button" value="+" onclick="dis('+')" />
  <input class="button div18" type="button" value="0" onclick="dis('0')" />
  <input class="button div19" type="button" value="." onclick="dis('.')" />
  <input class="button div20" type="button" value="=" onclick="solve()" />
</div>

These are just the code for the text-box and the buttons and the onclick values are for the javascript functions we are going to write.

The CSS code:

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
.container {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: 80px repeat(5, 50px);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 15px #1a1a1a;
}
.output {
  background: #000;
  color: #fff;
  border: none;
  font-size: -webkit-xxx-large;
  text-align: right;
  font-family: "Roboto Mono", monospace;
  font-size: 48px;
}
.button {
  -webkit-appearance: none;
  display: block;
  background: #333;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: x-large;
  padding: 10px;
  min-width: 50px;
  min-height: 50px;
  line-height: 25px;
  border: 0px;
  outline: none;
  border-radius: 40px;
  transition: 0.5s;
}
.button:active {
  opacity: 0.7;
}
.div1 {
  grid-area: 1 / 1 / 2 / 5;
}
.div2 {
  grid-area: 2 / 1 / 3 / 2;
  background: #a5a5a5;
  color: #000;
}
.div3 {
  grid-area: 2 / 2 / 3 / 3;
  background: #a5a5a5;
  color: #000;
}
.div4 {
  grid-area: 2 / 3 / 3 / 4;
  background: #a5a5a5;
  color: #000;
}
.div5 {
  grid-area: 2 / 4 / 3 / 5;
  background: #fe9505;
}
.div6 {
  grid-area: 3 / 1 / 4 / 2;
}
.div7 {
  grid-area: 3 / 2 / 4 / 3;
}
.div8 {
  grid-area: 3 / 3 / 4 / 4;
}
.div9 {
  grid-area: 3 / 4 / 4 / 5;
  background: #fe9505;
}
.div10 {
  grid-area: 4 / 1 / 5 / 2;
}
.div11 {
  grid-area: 4 / 2 / 5 / 3;
}
.div12 {
  grid-area: 4 / 3 / 5 / 4;
}
.div13 {
  grid-area: 4 / 4 / 5 / 5;
  background: #fe9505;
}
.div14 {
  grid-area: 5 / 1 / 6 / 2;
}
.div15 {
  grid-area: 5 / 2 / 6 / 3;
}
.div16 {
  grid-area: 5 / 3 / 6 / 4;
}
.div17 {
  grid-area: 5 / 4 / 6 / 5;
  background: #fe9505;
}
.div18 {
  grid-area: 6 / 1 / 7 / 3;
  text-align: left;
  padding-left: 17px;
}
.div19 {
  grid-area: 6 / 3 / 7 / 4;
}
.div20 {
  grid-area: 6 / 4 / 7 / 5;
  background: #fe9505;
}

Part:2 Javascript

The Javascript code:

//function that display value
function dis(val) {
  document.getElementById("result").value += val;
}
//function that deletes the value
function back() {
  var x = document.getElementById("result").value;
  document.getElementById("result").value = x.substring(0, x.length - 1);
}
//function that clears the display
function clr() {
  document.getElementById("result").value = "";
}
//function that changes the sign
function changeSign() {
  let input = document.getElementById("result");
  if (input.value.substring(0, 1) == "-") {
    input.value = input.value.substring(1, input.value.length);
  } else {
    input.value = "-" + input.value;
  }
}
//function that solve the problem and display the result
function solve() {
  let x = document.getElementById("result").value;
  if (x) {
    try {
      let y = eval(x);
      document.getElementById("result").value = y;
    } catch {}
  }
}

In this there are five functions, each functions are called when their corresponding buttons are pressed. You can see comments on each functions and what they do.

Demo

Click here for the codepen demo

Completed

Thank you for sticking till the end. Ask your questions in the comments section.