Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Create Simple Calculator using JQuery, HTML and CSS

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


simple jquery calculator
rel="stylesheet" type="text/css" href="style.css">


class='calc'>
id='disp'>



















src="script.js">


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.



This post first appeared on Selenium Web Driver Tutorials, please read the originial post: here

Share the post

Create Simple Calculator using JQuery, HTML and CSS

×

Subscribe to Selenium Web Driver Tutorials

Get updates delivered right to your inbox!

Thank you for your subscription

×