Create Simple Calculator using JQuery, HTML and CSS

by Sumit Kumar Pradhan on May 01, 2019 May 01, 2019 in html5, javascript, jquery, web development

This tutorial explains how to create simple calculator application using jquery, html and css. Making a calculator in JavaScript is not have been taught so far.As it supports mathematical calculations. With the help of JQuery, HTML and CSS we can build few tiny applications which run completely inside the browser. Today in this tutorial I am going to show you how to create a simple calculator using JQuery with the help of HTML and CSS. Using this calculator we can perform basic arithmetic operations.

Create Simple Calculator using JQuery, HTML and CSS

DOWNLOAD DEMO
Lets see the below simple example to create simple calculator application.

calculator.html

<html>
   <head>
      <title> simple jquery calculator </title>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <div class='calc'>
         <div id='disp'></div>
         <button id='1'>1</button>
         <button id='2'>2</button>
         <button id='3'>3</button>
         <button id='add'>+</button>
         <button id='4'>4</button>
         <button id='5'>5</button>
         <button id='6'>6</button>
         <button id='subtr'>-</button>
         <button id='7'>7</button>
         <button id='8'>8</button>
         <button id='9'>9</button>
         <button id='mult'>x</button>
         <button id='clear'>CE</button>
         <button id='0'>0</button>
         <button id='dec'>.</button>
         <button id='division'>/</button>
         <button id='ans'>=</button>
      </div>
      <script src="script.js"></script>
   </body>
<html>

style.css

.calc{
  position:absolute;
  background-color:#DCDCDC ;
  width:300px;
  height:350px;
  
}
#disp{
  display:block;
  height:52px;
  background-color:#000;
  margin:8px;
}
.calc button{
  height:54px;
  width:71px;
  background-color:#81D4FA;
  margin : 0px;
}
#ans{
  width:295px;
}
#disp{
  font-size:45px;
  text-align:right;
  overflow:auto;
  background-color:white;
}

script.js

var disp = document.getElementById("disp");
function ud(n){ 
disp.innerHTML += n ;
}
function ans(){
c=eval(disp.innerHTML);
disp.innerHTML=c;
}
function clc(){
disp.innerHTML='';
}

document.getElementById("1").addEventListener("click",function(){ ud(1); });
document.getElementById("2").addEventListener("click",function(){ ud(2); });
document.getElementById("3").addEventListener("click",function(){ ud(3); });
document.getElementById("4").addEventListener("click",function(){ ud(4); });
document.getElementById("5").addEventListener("click",function(){ ud(5); });
document.getElementById("6").addEventListener("click",function(){ ud(6); });
document.getElementById("7").addEventListener("click",function(){ ud(7); });
document.getElementById("8").addEventListener("click",function(){ ud(8); });
document.getElementById("9").addEventListener("click",function(){ ud(9); });
document.getElementById("0").addEventListener("click",function(){ ud(0); });
document.getElementById("dec").addEventListener("click",function(){ ud('.'); });

document.getElementById("add").addEventListener("click",function(){ ud('+'); });
document.getElementById("subtr").addEventListener("click",function(){ ud('-'); });
document.getElementById("mult").addEventListener("click",function(){ ud('*'); });
document.getElementById("division").addEventListener("click",function(){ ud('/'); });

document.getElementById("clear").addEventListener("click",function(){clc(); });
document.getElementById("ans").addEventListener("click",function(){ ans(); });

This is all about Creating a Simple Calculator using JQuery, HTML and CSS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.