Simple Calculator in JavaScript using if else

Simple Calculator in JavaScript using if else
Code Snippet:Pure JavaScript Calculator
Author: Gokhan
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 13,609
License: MIT
Edit Code online: View on CodePen
Read More

This code snippet helps you to create a simple calculator with all basic calculations functions. It comes in a nice widget-style calculator app that can be easily integrated into any HTML webpage. This simple calculator program uses JavaScript if else statements to perform various arithmetic operations.

How to Create Simple Calculator in JavaScript

1. First of all, create a div element with a class name and id “screen” and place a blank p tag inside it. Similarly, create a div element with a class and id “screen”. Create an unordered list of buttons and specify its class name “number-div”. Wrap all these elements into a div element and define its class name “main-div”. So, the complete HTML structure for a simple calculator is as follows:

<div class="main-div">
    <div class="screen" id="screen"><p></p></div>
    <div class="clear" id="clear">C</div>
       <ul class="number-div">
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>+</li>
                 <li>4</li>
                 <li>5</li>
                 <li>6</li>
                 <li>x</li>
                 <li>7</li>
                 <li>8</li>
                 <li>9</li>
                 <li>-</li>
                 <li>0</li>
                 <li>.</li>
                 <li id="equals">=</li>
                 <li>÷</li>
       </ul>
</div>

2. In the second step, target each element in CSS and define their styles as follows. You can set the custom values for CSS properties in order to customize the calculator. Therefore, the following are the CSS styles for the calculator.

.main-div{
	 width:290px;
	 margin:0 auto;
	 background:#3F475B;
	 height:310px;
	 box-shadow:2px 2px 2px gray;
	 padding:15px;
	 border-bottom:5px solid #ED586C;
     border-radius:4px;	
    position:relative;	 
}
.screen-div,.number-div{
	  padding:0;
	  margin:0;
}
.screen{
	list-style:none;
	color:white;
	height:45px;
	width:58px;
  margin-left:8px;
	border-radius:4px;
	border-top:4px solid #828A9B;
	text-align:center;
	font-weight:bold;
	font-family: 'Ubuntu', sans-serif;
	margin-bottom:8px;
  width:182px;
	background:#828A9B;
   border-top:4px solid #ED586C;
  overflow:hidden;
}
.clear{
    width:60px;
	background:#7B8D8E;
	padding:10px 17px;
	position:absolute;
	border-radius:3px;
	left:215px;
	top:18px;
	color:white;
	cursor:pointer;
	text-align:center;
}
.screen{
  p{
    margin: 0;
  }
}
.number-div li{
	 list-style:none;
	 float:left;
     width:52px;
    background:white;
	margin:9px 5px;
	padding:10px;
	border-bottom:4px solid #828A9B;
	border-radius:5px;
	color:#888888;
	text-align:center;
	transition:.2s;
	cursor:pointer;
}

.number-div li:hover{
	background: #44B3C2;
	border-bottom: 4px solid #336699;
	color: white;
}

#equals{
	background:#F43341;
	color:white;
}
#equals:hover{
	background: #FE5E6A;
	border-bottom: 4px solid #B3232E;
	color: white;
}

3. Finally, add the following JavaScript program that uses if else statements to calculate integers and float values.

window.onload = function (){
	var elements = document.getElementsByTagName("li");
	var screen = document.querySelectorAll('#screen p')[0];
	var clear =   document.getElementsByClassName('clear')[0];
	
	for(var i=0;i<elements.length;i+=1){
		  if(elements[i].innerHTML === '='){
			    elements[i].addEventListener("click", calculate(i));
		  }else{
			   elements[i].addEventListener("click", addtocurrentvalue(i));
		  }
	}

	function addtocurrentvalue (i){
		return function(){
			if (elements[i].innerHTML === "÷") {
               screen.innerHTML  +=  "/ " ;
      }else if(elements[i].innerHTML === "x"){
			      screen.innerHTML += "*";
		   } else{
			   screen.innerHTML  += elements[i].innerHTML;
		   }
	  };
   }
   clear.onclick = function () {
    screen.innerHTML = '';
  }; 

 function calculate(i) {
    return function () {
        screen.innerHTML = eval(screen.innerHTML);
    };
  }
};

That’s all! hopefully, you have successfully created a simple Calculator in JavaScript using if else statements. If you have any questions or suggestions, let me know by comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X