Q:

Creating a Simple Calculator with Jquery with CSS

belongs to collection: HTML + CSS Examples

YasminRadwan26
Save to bookmark
|
2022-06-01
|
  370 
0

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.

Html programming, Css programming, examples, Html programming examples, Css programming examples,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-06-01
need an explanation for this answer? contact us directly to get an explanation for this answer

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>

 

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();
 });
});

 

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;
}

 

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}

 

Output:

Addition Output:-

Input =12345+12345=24690

Subtraction Output:-

24690-12345=12345

Multiply Output:-

12345*10=123450

Divide Output:-

123450/100=1234.5

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

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML + CSS Examples
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
<< You Will Create Several Files Related To A Recipe ...