30/04/2016

Creating a Simple Calculator with Jquery with CSS

This is a simple calculator in Jquery and CSS(Cascading Style Sheets). It allows mostly tasks such as Addition, Subtraction, Multiplication, and Division with help of Jquery and CSS. Please follow the given step to create a calculator using jquery.

How to use it:

1. Copy the code into one folder with giving a different -2 name and at the end run the index.html file your code will be work 100%  here is a step by step explanation.

first, open a notepad and any other editor which you are using mostly  and save the given code as  index.html.

Simple Calculator using Jquery and CSS.


Code Start From Here. This is a main Index file for Calculator.

Index.html

<!DOCTYPE html>
<html>
<head>
 <title>jQuery Calculator Example</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="reset.css">
 <link rel="stylesheet" type="text/css" href="main.css">
 <script type="text/javascript" src="calculator.js"></script>
</head>

<body>
<div id="jquery-script-menu">
<script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div class="jquery-script-clear"></div>
<h1 style="margin:150px auto 20px auto" align="center">jQuery Calculator Example</h1>
 <section class="container">
  <div class="calculator">
   <input type="text" readonly>
   <div class="row">
    <div class="key">1</div>
    <div class="key">2</div>
    <div class="key">3</div>
    <div class="key last">0</div>
   </div>
  <div class="row">
    <div class="key">4</div>
    <div class="key">5</div>
    <div class="key">6</div>
    <div class="key last action instant">cl</div>
   </div>
   <div class="row">
    <div class="key">7</div>
    <div class="key">8</div>
    <div class="key">9</div>
    <div class="key last action instant">=</div>
   </div>
   <div class="row">
    <div class="key action">+</div>
    <div class="key action">-</div>
    <div class="key action">x</div>
    <div class="key last action">/</div>
   </div>
   </div>
</section>
 <footer class="container">
<h1>A Simple Calculator by Ghanendra Yadav For More<a href="https://www.programmingwithbasics.com/">Click Here</a></h1>
 </footer>
    <script type="text/javascript">
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>

Now Open Again Editor And Save Given Code As calculator.js Code Start From Here. This is a Javascript file for Calculator.

calculator.js

$(document).ready(function(){
 //Dom is ready to let's get the fun started.
  var Calculator = {
  runningTotal : '',
  currentVal : '',
  setCurrentVal: false,
  executeAction: '',
  display: '',
  adjustTotals: function(val){
   if (!this.setCurrentVal) {
    //If this is the first number user has entered then it becomes runningTotal
    //Otherwise it becomes currentVal which will then be used to update runningTotal based on the action picked
    this.runningTotal += val;
   } else {
    //Val is a string so we can append to currentVal for multiple digits
    this.currentVal += val;
   };
  },
  add: function(){
   this.runningTotal = parseInt(this.runningTotal) + parseInt(this.currentVal);
  },
  subtract: function() {
   this.runningTotal = parseInt(this.runningTotal) - parseInt(this.currentVal);
  },
  multiply: function(){
   this.runningTotal = parseInt(this.runningTotal) * parseInt(this.currentVal);
  },
  divide: function(){
   this.runningTotal = parseInt(this.runningTotal) / parseInt(this.currentVal);
  },
  clear: function(){
   this.runningTotal = '';
   this.currentVal = '';
   this.executeAction = '';
   this.setCurrentVal = false;
   this.display = '';
  },
  resetCurrentVal: function (){
   this.currentVal = '';
  },

  calculate: function(){
   this.executeAction = '';
   this.currentVal = '';
   return this.runningTotal;
  },
  getAction: function(val){
    var method = '';
   switch (val) {
    case '+':
     method = Calculator.add;
     break;
    case '-':
     method = Calculator.subtract;
     break;
    case 'x':
     method = Calculator.multiply;
     break;
    case '/':
     method = Calculator.divide;
     break;
   }
    return method;
  },
  setDisplay: function(){
   return this.display = this.currentVal == '' ? this.runningTotal : this.currentVal;
  }
 };
 var onButtonPress = function (){
  var that = $(this),
   action = that.hasClass('action'),
   instant = that.hasClass('instant'),
   val = that.text();
  if (!action) {
   //No action means the button pressed is a number, not an "action"
   Calculator.adjustTotals(val);
  } else if(!instant) {
   //An action button was pressed. Store the action so it can be executed later
   if (Calculator.executeAction != ''){
    Calculator.executeAction();
   };
    Calculator.executeAction = Calculator.getAction(val);
   Calculator.setCurrentVal = true;
   Calculator.resetCurrentVal();
  } else {
   //Either = or Clr is clicked. this needs immediate action.
   if (Calculator.executeAction != ''){
    Calculator.executeAction();
   };
    switch (val){
    case 'cl':
     method = Calculator.clear();
     break;
    case '=':
     method = Calculator.calculate();
     break;
   }
  }
   Calculator.setDisplay();
 }
  var refreshVal = function(){
  $('.calculator input[type=text]').val(Calculator.display);
 }
  $('div.key').click(function(){
  //We want this to stay as div.keyin the onButtonPress function
  onButtonPress.call(this);
  refreshVal();
 });
});

Now Open Again Editor And Save As main.css, This is a main CSS file for Calculator.

main.css

*,
*:after,
*:before {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
*:before, *:after {
 display: table-cell;
 content: '';
}
*:after{
 clear: both;
}
body{
 font-family: Helvetica, Arial, sans-serif;
}
.container {
 margin: 0 auto;
 width: 350px;
}
.calculator {
 padding: 10px;
 margin-top: 20px;
 background-color: #ccc;
 border-radius: 5px;
 /*this is to remove space between divs that are inline-block*/
 font-size: 0;
}
.calculator > input[type=text] {
 width: 100%;
 height: 50px;
 border: none;
 background-color: #eee;
 text-align: right;
 font-size: 30px;
 padding-right: 10px;
}
.calculator .row {
 margin-top: 10px;
}
.calculator .key {
 width: 78.7px;
 display: inline-block;
 background-color: black;
 color: white;
 font-size: 1rem;
 margin-right: 5px;
 border-radius: 5px;
 height: 50px;
 line-height: 50px;
 text-align: center;
}
.calculator .key:hover{
 cursor: pointer;
}
.key.last{
 margin-right: 0px;
}
.key.action {
 background-color: #646060;
}
footer {
 font-style: italic;
 padding-top: 35px;
text-align: center;
font-size: 10px;
}
h1, h3, h4, h5, p {
margin-bottom: 30px;
}

Now Again Follow the Same Step And Save As reset.css, This is a reset CSS file for Calculator.

reset.css

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}


Now you complete all the steps now open index.html your program is working with your compatible browser here is a output if you want more program Click Here

Output:-

Addition Output:-
Input =12345+12345=24690

how to make calculator in jquery and html addition

Subtraction Output:-


24690-12345=12345

build a simple calculator using Jquery and HTML Substraction

Multiply Output:-

12345*10=123450

build a simple calculator using Jquery and HTML multiplication

Divide Output:-

123450/100=1234.5

build a simple calculator using Jquery and HTML Devide

What happened if we divide 0/0=NaN (Not A Number )

simple calculator using Jquery, CSS and HTML operations

Previous Post
Next Post

post written by:

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

0 Comments: