Create a Simple JavaScript Calculator

Today we will be creating a simple calculator using Javascript. First, we will create the HTML layout of the calculator and style it with little CSS. We will be using Bootstrap for some default styling like buttons. It will be a very simple javascript calculator in which we will be using some DOM manipulations to access the button content and perform calculations on them.

javascript calculator

JavaScript Calculator – HTML/CSS


<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>JavaScript Projects</title>
 <meta ID="description" content="">
 <meta ID="viewport" content="width=device-width, initial-scale=1">
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 <style>
 body {
 background-color: deepskyblue;
 }
 #output {
 height: 45px;
 background-color: #33FF00;
 color: black;
 width: 100%;
 font-size: 2em;
 padding: 5px;
 text-align: right;
 margin-bottom: 25px;
 overflow: hidden;
 margin-top: 22px;
 }
 #mycalcu {
 width: 350px;
 background-color: gray;
 height: 350px;
 padding: 5px;
 margin-left: 35%;
 margin-top: 75px;;
 }
 .cbutton {
 font-size: 2em;
 width: 40px;
 margin: 4px;
 padding: 4px;
 }
 .container {
 padding: 25px;
 }
 </style>
</head>
<body>
 <div class="container">
 <div id="mycalcu">
 <div class="col-xs-12">
 <div id="output"></div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">1</div>
 <div class="btn btn-primary cbutton">2</div>
 <div class="btn btn-primary cbutton">3</div>
 <div class="btn btn-primary cbutton">+</div>
 <div class="btn btn-primary cbutton">C</div>
 </div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">4</div>
 <div class="btn btn-primary cbutton">5</div>
 <div class="btn btn-primary cbutton">6</div>
 <div class="btn btn-primary cbutton">-</div>
 </div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">7</div>
 <div class="btn btn-primary cbutton">8</div>
 <div class="btn btn-primary cbutton">9</div>
 <div class="btn btn-primary cbutton">*</div>
 </div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">.</div>
 <div class="btn btn-primary cbutton">0</div>
 <div class="btn btn-primary cbutton">=</div>
 <div class="btn btn-primary cbutton">/</div>
 </div>
 </div>
 </div>
 </div>
 <script>

 </script>
</body>
</html>

Now, we will add the javascript logic to the code to make it functional. We will perform simple DOM manipulations and add our logic to the calculations. The javascript code is given below.

Adding the JavaScript – JS Code


<script>
 var mybtn = document.getElementsByClassName("cbutton");
 var myOutput = document.getElementById("output");
 var myCal = '';
 var myCom = false;
 var mySwitch = false;
 var myOpe = ["+", "-", "*", "/"];
 //console.log(mybtn);
 for (var i = 0; i < mybtn.length; i++) {
 mybtn[i].addEventListener("click", function () {
 var myValue = this.innerHTML;
 if (myCom || myCal == "0") {
 myCom = false;
 myCal = '';
 }
 if (myValue == "+" || myValue == "-" || myValue == "*" || myValue == "/") {
 if (mySwitch) {
 mySwitch = false;
 if (myOpe.indexOf(myOutput.innerHTML.slice(-1)) > -1) {
 myCal = myCal.substring(0, myCal.length - 1);
 } else {
 myCal = eval(myCal);
 }
 }
 mySwitch = true;
 }
 if (myValue == "=") {
 myValue = '';
 if (myOpe.indexOf(myOutput.innerHTML.slice(-1)) == -1) {
 myCal = eval(myCal);
 }
 } else if (myValue == "C") {
 myCal = 0;
 myCom = true;
 } else if (myOutput.innerHTML.indexOf(".") > -1 && myValue == ".") {
 myValue = '';
 } else {
 myCal = myCal + myValue;
 }
 myOutput.innerHTML = myCal;
 });
 }
 </script>

As you can see, this is a very simple calculator but is functional. I made this course as a part of learning javascript with the help of an udemy course. You can check this course here on udemy.

Complete Code


<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>JavaScript Projects</title>
 <meta ID="description" content="">
 <meta ID="viewport" content="width=device-width, initial-scale=1">
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 <style>
 body {
 background-color: deepskyblue;
 }
 #output {
 height: 45px;
 background-color: #33FF00;
 color: black;
 width: 100%;
 font-size: 2em;
 padding: 5px;
 text-align: right;
 margin-bottom: 25px;
 overflow: hidden;
 margin-top: 22px;
 }
 #mycalcu {
 width: 350px;
 background-color: gray;
 height: 350px;
 padding: 5px;
 margin-left: 35%;
 margin-top: 75px;;
 }
 .cbutton {
 font-size: 2em;
 width: 40px;
 margin: 4px;
 padding: 4px;
 }
 .container {
 padding: 25px;
 }
 </style>
</head>
<body>
 <div class="container">
 <div id="mycalcu">
 <div class="col-xs-12">
 <div id="output"></div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">1</div>
 <div class="btn btn-primary cbutton">2</div>
 <div class="btn btn-primary cbutton">3</div>
 <div class="btn btn-primary cbutton">+</div>
 <div class="btn btn-primary cbutton">C</div>
 </div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">4</div>
 <div class="btn btn-primary cbutton">5</div>
 <div class="btn btn-primary cbutton">6</div>
 <div class="btn btn-primary cbutton">-</div>
 </div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">7</div>
 <div class="btn btn-primary cbutton">8</div>
 <div class="btn btn-primary cbutton">9</div>
 <div class="btn btn-primary cbutton">*</div>
 </div>
 <div class="col-xs-12">
 <div class="btn btn-primary cbutton">.</div>
 <div class="btn btn-primary cbutton">0</div>
 <div class="btn btn-primary cbutton">=</div>
 <div class="btn btn-primary cbutton">/</div>
 </div>
 </div>
 </div>
 </div>
 <script>
 var mybtn = document.getElementsByClassName("cbutton");
 var myOutput = document.getElementById("output");
 var myCal = '';
 var myCom = false;
 var mySwitch = false;
 var myOpe = ["+", "-", "*", "/"];
 //console.log(mybtn);
 for (var i = 0; i < mybtn.length; i++) {
 mybtn[i].addEventListener("click", function () {
 var myValue = this.innerHTML;
 if (myCom || myCal == "0") {
 myCom = false;
 myCal = '';
 }
 if (myValue == "+" || myValue == "-" || myValue == "*" || myValue == "/") {
 if (mySwitch) {
 mySwitch = false;
 if (myOpe.indexOf(myOutput.innerHTML.slice(-1)) > -1) {
 myCal = myCal.substring(0, myCal.length - 1);
 } else {
 myCal = eval(myCal);
 }
 }
 mySwitch = true;
 }
 if (myValue == "=") {
 myValue = '';
 if (myOpe.indexOf(myOutput.innerHTML.slice(-1)) == -1) {
 myCal = eval(myCal);
 }
 } else if (myValue == "C") {
 myCal = 0;
 myCom = true;
 } else if (myOutput.innerHTML.indexOf(".") > -1 && myValue == ".") {
 myValue = '';
 } else {
 myCal = myCal + myValue;
 }
 myOutput.innerHTML = myCal;
 });
 }
 </script>
</body>
</html>

This is the full source code of the javascript calculator which you can paste the above code in a text editor and save it as html file and run the code.

Leave a Reply