Calculator is a very basic application in any gadget. You have seen it in your computer and smart phone. You have done countless calculations in while studying mathematics using an electronic calculator. Have you ever wondered how easy or difficult it is to create a small application or program that emulates working of a basic calculator? Do you know how to create calculator application using jQuery?
You are aware of capabilities of jQuery in web application development. Let’s use those skills learned with jQuery in developing this small and basic but amazingly exciting program.
Step-1 Interface of a Simple Calculator
The first step in ‘how to create the calculator’ is creating its interface. The interface must have these things-
- Ability to input the digits in the text input box by pressing number buttons
- Ability to select the operation (add/ multiply/ subtract/ divide) to be performed by pressing the suitable operator buttons
- Equal to (=) button to finally evaluate the expression made with numbers and operators and stored in text input box
To create the above interface an Internal CSS is added that describes
- Container class for the calculator interface
- Classes for buttons to display numbers, operators and equal to(=)
An input type text is added at top to store the numbers and operators entered by the user. The text input box is right aligned so that digits can be added from right just like in a calculator.
Step-2 Coding jQuery Functions
The second step is to add the functionality. For this arithmetic operations are executed through jQuery functions in this manner-
- Every time a number button is clicked click function is called for the selector using class ‘numBtn’. The value of the button pressed is appended in the existing string of digits and displayed back in the text input box.
- When an operator button is clicked the click function is called for the selector using class ‘opBtn’. The operator value of the button pressed is appended in the existing string of digits and displayed back in the text input box.
- On clicking clear button ‘C’ the click function is called for the selector using class ‘clrBtn’. The text input box value is set to empty string thus clearing the text input box for next input.
- When the ‘=’ (equal to) button is clicked the click function is called for the selector using class ‘calBtn’. The string currently available in the text input box is evaluated using eval() function and the result is displayed back in the text input box
Here is the complete source code for How to Create Calculator Application using jQuery. Run it and see how it works!!
<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
background-color: white;
width:180px;
height:380px;
border-style:solid;
border-width:2px;
padding:10px;
}
.numBtn {
color: maroon;
width: 50px;
height: 50px;
}
.opBtn {
background-color: maroon;
color:white;
font-size:24px;
width: 50px;
height: 50px;
}
.calBtn {
background-color: blue;
color:white;
font-size:24px;
width:170px;;
height: 50px;
}
.clrBtn {
background-color: green;
color:white;
font-size:18px;
width: 50px;
height: 50px;
}
.numtxt
{
background-color: grey;
color:white;
font-size:14;
height: 40px;
text-align:right;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".numBtn").click(function(){
var value1 = $( this ).val();
var value2 = $( "#input" ).val();
$( "#input" ).val( value2+value1);
});
$(".clrBtn").click(function(){
$( "#input" ).val("");
});
$(".opBtn").click(function(){
var value1 = $( this ).val();
var value2 = $( "#input" ).val();
$( "#input" ).val( value2+value1);
});
$(".calBtn").click(function(){
var value2 = eval($( "#input" ).val());
$( "#input" ).val( value2);
});
});
</script>
</head>
<body style="font-family:arial">
<div class="ui" align="center">
<table>
<tr>
<td colspan="3"><input type="text" class="numtxt" id="input"></td>
</tr>
<tr>
<td><button class="numBtn" value="1">1</button></td>
<td><button class="numBtn" value="2">2</button></td>
<td><button class="numBtn" value="3">3</button></td>
</tr>
<tr>
<td><button class="numBtn" value="4">4</button></td>
<td><button class="numBtn" value="5">5</button></td>
<td><button class="numBtn" value="6">6</button></td>
</tr>
<tr>
<td><button class="numBtn" value="7">7</button></td>
<td><button class="numBtn" value="8">8</button></td>
<td><button class="numBtn" value="9">9</button></td>
</tr>
<tr>
<td><button class="numBtn" value="0">0</button></td>
<td><button class="opBtn" value="/">/</button></td>
<td><button class="opBtn" value="*">*</button></td>
</tr>
<tr>
<td><button class="opBtn" value="-">-</button></td>
<td><button class="opBtn" value="+">+</button></td>
<td><button class="clrBtn" value="c">C</button></td>
</tr>
<tr>
<td colspan="3"><button class="calBtn" value="=">=</button></td>
</tr>
</table>
</div>
</body>
</html>
Be First to Comment