Skip to main content

How To Build a Simple Calculator Using HTML, CSS & Javascript

Have you ever wanted to design a simple calculator using HTML, CSS and most of all Javascript to handle the calculations? In this tutorial I'll guide you through designing yours with the best design you might have imagined.

Before we continue with this tutorial, I'd assume you have a basic knowledge of HTML, CSS and Javascript. Anyways, if you are new to any of these, you can as well download the full script at the end of this post and simply upload to your server to have a working and stunning looking calculator webpage.

Here's what we'd be having at the end of this tutorial.
Calculator with JS, CSS and HTML
You can also check out the live demo by following the link below.

View Live Demo

Let's start with the HTML code. You can create a file in your favorite text editor (Notepad, Notepad++, Sublime Text, Visual Studio code etc.). Then copy the below HTML code and save as "index.html". The below code contains the buttons and inputs that houses the structure of the calculator.

<!DOCTYPE html>  <html>  <head>  	<title>A Simple Calculator With HTML, CSS & Javascript - Oscarmini Calculator</title>  	<meta name="description" content="Here's a demo of a simple calculator with a stunning interface built from scratch with CSS, Javascript and of course HTML"/>  <link rel="stylesheet" type="text/css" href="style.css">  <script type="text/javascript" src="script.js"></script>  </head>  <body>    <div class="container">  	<div class="calc-container">    		<h1>OM Calc</h1>    		<input id="box" value="" type="text" readonly placeholder="0"><br/>    		<div class="btn-container">  		<div class="row">  				<button class="btn" onclick="shownum('1')"><strong>1</strong></button>  				<button class="btn" onclick="shownum('2')"><strong>2</strong></button>  				<button class="btn" onclick="shownum('3')"><strong>3</strong></button>  				<button class="btn cbtn" onclick="delback()"><strong></strong></button>  		</div>  		<div class="row">  				<button class="btn" onclick="shownum('4')"><strong>4</strong></button>  				<button class="btn" onclick="shownum('5')"><strong>5</strong></button>  				<button class="btn" onclick="shownum('6')"><strong>6</strong></button>  				<button class="btn" onclick="shownum('+')"><strong>+</strong></button>  		</div>  		<div class="row">  				<button class="btn" onclick="shownum('7')"><strong>7</strong></button>  				<button class="btn" onclick="shownum('8')"><strong>8</strong></button>  				<button class="btn" onclick="shownum('9')"><strong>9</strong></button>  				<button class="btn" onclick="shownum('-')"><strong>-</strong></button>  		</div>  		<div class="row">  				<button class="btn" onclick="shownum('.')"><strong>.</strong></button>  				<button class="btn" onclick="shownum('0')"><strong>0</strong></button>  				<button class="btn" onclick="shownum('00')"><strong>00</strong></button>  				<button class="btn" onclick="shownum('*')"><strong>*</strong></button>  				  		</div>  		<div class="row">  				<button class="btn cbtn" onclick="clearme()"><strong>C</strong></button>  				<button class="btn solvebtn" onclick="solve()"><strong>=</strong></button>  				<button class="btn" onclick="shownum('/')"><strong>/</strong></button>  		</div>	  		  		</div>      	</div>  </div>    	<footer id="footer">Designed by <a href="" target="_blank" style="color: #ffbb4f">Oscarmini</a></footer>  </body>  </html>
HTML for Simple JS Calc

After you must have saved the above code in your choice directory or folder, it's time to write the CSS to style our calculator into a beauty. This css file as you can see from the above code is already linked.

h1 {color: #fff;}  .container{          margin: 0 auto;          }    .calc-container {  		padding: 20px;  		background: #191717;  		width: 250px;  		border-radius: 20px;  		box-shadow: 10px 10px 5px #888888;	     		-moz-box-shadow: 10px 10px 5px #888888;  		-webkit-box-shadow: 10px 10px 5px #888888;  		margin: 10px auto;          }  #box {          width:100%;           height: 40px;           border:1px solid #000;           background: #ddded9;           font-size: 30px;           text-align: right;          color: #f00;  		margin: 0 auto;  	          }   .btn-container {  		margin: 10px 5px;  		background: #ffbb4f;  }    .btn {  		height: 40px;  		width: 40px;          padding: 10px;           background: #291616;           color: #fff;   		border: none;          margin: 8px;           font-size: 15px;      		box-shadow: 1px 1px 1px #000;  	    -moz-box-shadow: 1px 1px 1px #000;  	    -webkit-box-shadow: 1px 1px 1px #000;          }    .btn:hover {background-color: #000}    .btn:active {    background-color: #000;    box-shadow: 0 5px #666;    transform: translateY(2px);  }  .solvebtn {  		width:100px;  		background: #085d08;  }  .solvebtn:hover {background-color: #013e01;}    .solvebtn:active {    background-color: #013e01;    box-shadow: 0 5px #666;    transform: translateY(2px);  }  .cbtn {  		background: #f00;   }  .cbtn:hover {background-color: #b70505}    .cbtn:active {    background-color: #b70505;    box-shadow: 0 5px #666;    transform: translateY(2px);  }  #footer {  		position:fixed;  	   	left:0px;  	   	bottom:0px;  	   	height:10px;  	   	width:100%;  	   	background:#000;  		text-align: center;  		margin: 0px auto;  		padding: 10px;  		color: #fff;  		}  #footer a:link {color: #fff;text-decoration: none;}
CSS for simple JS calculator

You have to save this codes as "style.css" and in the same directory as the "index.html" you saved earlier.

Now this is where the magic happens. We are going to use javascript to handle all the calculations. Below is the javascript code you need. Make sure it is saved as "script.js" in the exact same folder as the files above.

// Get the Variable from the input box  function screen(val)          {          document.getElementById("box").value=val;          }    // Concatenating Values  function shownum(val)   {          document.getElementById("box").value+=val;          }    // Performing the Calcuulation  function solve() {       try     {               screen(eval(document.getElementById("box").value))               }       catch(e) {              screen('Error')               }                    }  // Clear the Input Screen  function clearme() {                  document.getElementById("box").value = "";                  }   // Backspace Function  function delback() {                  var valueNeeded = document.getElementById("box").value;                  var finalValueNeeded = valueNeeded.substr(0, valueNeeded.length-1);                   document.getElementById("box").value=finalValueNeeded;                                    } 
JavaScript for simple JS calculator

Once you have all these files saved in the same folder, it's time to test out your work. Launch the "index.html" file in your favorite browser and test your stunning looking JS, HTML and CSS written calculator.

Wanna save yourself the stress of having to write and save these codes yourself? Well, I've got you covered. You can download the full script with the link below and simple upload to see how it works.

Download the full script below

Do let me know what you'd like to see in the future on this blog as regards, HTML, CSS and Javascript.


Popular posts from this blog

5 Best Courier Services in Nigeria 2019: Top Postal Companies

I could remember back in the days when we sent our mails and parcels through postal offices. But today things have changed and many of us might be wondering if Nigeria still has reliable courier services. The good news here is, Nigeria still does and more are emerging. But due to the exit of The Nigerian Postal Services (NIPOST), lots of personal and corporate enterprise in Nigeria had to search for other means to still have their packages sent as well as ensuring that their sent items are been received by the designated person or receiver. Obviously, when such opportunities present themselves, a whole bunch of individuals and investors have to start looking in the direction of providing a solution to the eminent need and that's what has happened in this sector. We have, as a result, seen new courier services emerging in Nigeria in order to provide the service of helping individuals post their items to others within and outside Nigeria. Most of the successfully establishe

post free classied in nigeria - Find Great Deals & Meet Sellers Near You.


[Album download] Davido – A Good Time

Afro-pop music star  Davido  finally unlocked his sophomore album titled  “A Good Time” , following his rise to the to top of the music chain after his debut  “Genesis”  which was released 7 years ago. The long-awaited L.P features guest appearances  Dremo, Chris Brown, Summer Walker, Peruzzi, Wurld, Naira Marley, Zlatan, Poopcan, A Boogie Wit Da Hoodie, Gunna  and  Yonda.  Speaking on “A Good Time”, Davido said: It’s been 7 years since I last dropped a complete body of work. A LONG TIME. Since my first album you’ve been with me and watched me develop, grow. Progress, regress, and progress again. A TURBULENT TIME. Since then I’ve lost too many loved ones. HARD TIMES. But I have also gained 3 beautiful littles ones. A BLESSED TIME. To crown it, I found the love of my life. A BLISSFUL TIME. I’m grateful for all of this. I’m grateful to have been through this journey with all your support. And I’m grateful to be able to share this project which signifies the point of my life I