How to Make Calculator in JavaScript

February 12, 2023

Learn How to Make Calculator with JavaScript

today I'm going to teach you how to Build Calculator App using JavaScript.

Step 1) Add HTML:

Example

<div class="calculator">
   <div class="screen">
      <h1 id="result"></h1>
   </div>
   <div class="cal-buttons">
      <ul id="buttons">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li id="clear">C</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>+</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>-</li>
         <li>0</li>
         <li>x</li>
         <li>.</li>
         <li>÷</li>
         <li id="equals">=</li>
      </ul>
   </div>
</div>

Step 2) Add CSS:

Example

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
}
body{
     background: #94cdde;
}
 *{
    box-sizing:border-box;
}
 .calculator{
     width: 100%;
     max-width: 280px;
     margin: 50px auto;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 0 5px #999999;
}
 .screen{
     background-color: orange;
     width: 100%;
     min-height: 100px;
     text-align: right;
     font-size: 24px;
     padding: 10px;
     padding-top: 20px;
}
 .cal-buttons{
     background: #ffffff;
     padding: 15px;
}
 ul#buttons{
     list-style-type: none;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 ul#buttons li{
     font-size: 24px;
     color: #000000;
     background: #ecedef;
     width: 20%;
     margin:5px 2.5%;
     padding-top: 11px;
     height: 50px;
     border-radius: 50%;
     font-weight: bold;
     cursor: pointer;
     text-align: center;
     transition: all 0.3s;
}
 ul#buttons li:hover,ul#buttons li:visited{
     background: #777777;
     color: #ffffff;
}
 ul#buttons li:active{
     background: #000000;
}
 li#equals{
     width: 100% !important;
     border-radius: 10px !important;
}

Try this code

Step 3) Add Javascript:

Example

var buttons = document.getElementById("buttons");
var li = buttons.querySelectorAll("li");
var result = document.getElementById("result");


for (let i = 0; i < li.length; i++) {
	li[i].addEventListener("click", function() {
		if (this.innerHTML == "=") {
			result.innerHTML = eval(result.innerHTML);
		} else {
			if (this.innerHTML == "÷") {
				result.innerHTML += "/";
			} else if (this.innerHTML == "x") {
				result.innerHTML += "*";
			} else if (this.innerHTML == 'C') {
				result.innerHTML = "";
			} else {
				result.innerHTML += this.innerHTML;
			}
		}
	});
}

Try this code