Build a Nice JavaScript Calculator for basic arithmetic operations
A calculator is a device designed to perform mathematical operations ranging from basic arithmetic to complex calculations.
In this article, we will build a simple calculator using JavaScript that can carry out basic arithmetic operations.
Steps for Building Simple JavaScript Calculator
Follow this video for complete guidance :
1. Select a suitable text editor like Sublime Text or VS Code
2. The HTML will be as follows:
<center>
<table border="4">
<tr>
<td colspan="1">
<input class="display" type="text" style="width:415px;" size="30" name="Display">
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input class="calc-btn" data-role="number" type="button" value="7"></td>
<td><input class="calc-btn" data-role="number" type="button" value="8"></td>
<td><input class="calc-btn" data-role="number" type="button" value="9"></td>
<td><input class="calc-btn" data-role="operator" type="button" value="+"></td>
</tr>
<tr>
<td><input class="calc-btn" data-role="number" type="button" value="4"></td>
<td><input class="calc-btn" data-role="number" type="button" value="5"></td>
<td><input class="calc-btn" data-role="number" type="button" value="6"></td>
<td><input class="calc-btn" data-role="operator" type="button" value="-"></td>
</tr>
<tr>
<td><input class="calc-btn" data-role="number" type="button" value="1"></td>
<td><input class="calc-btn" data-role="number" type="button" value="2"></td>
<td><input class="calc-btn" data-role="number" type="button" value="3"></td>
<td><input class="calc-btn" data-role="operator" type="button" value="*"></td>
</tr>
<tr>
<td><input class="clear-btn" type="button" value="C"></td>
<td><input class="calc-btn" data-role="number" type="button" value="0"></td>
<td><input class="calculate-btn" type="button" value="="></td>
<td><input class="calc-btn" data-role="operator" type="button" value="/"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
We are using button input to build the keyboard for the calculator.
3. Now we need to include JQuery library in our page. For Google JQuery CDN, use the following link:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
4. Also the following script is to be included for the calculation and operations of the calculator.
<script type="text/javascript">
$(".calc-btn").on('click',function(){
if($(this).attr('data-role')!='operator'){
$(".display").val($(".display").val()+$(this).val());
}
else{
if($(".display").val()!=''){
$(".display").val($(".display").val()+$(this).val());
}
}
});
$(".clear-btn").on('click',function(){
$(".display").val('');
});
$(".calculate-btn").on('click',function(){
var expression = $(".display").val();
$(".display").val(eval(expression));
});
</script>
The inputs are taken as either number or operator from the calculator keyboard and appended to the display input. When the button ‘=’ is clicked the calculation is done using JavaScript function eval().
The eval() function evaluates or executes an argument. If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements.
5. For better UI experience, we will add the following CSS in our page.
<style>
input{
font-size:2em;
width:100;
height:85;
}
</style>
Here is the complete code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
input{
font-size:2em;
width:100;
height:85;
}
</style>
<center>
<table border="4">
<tr>
<td colspan="1">
<input class="display" type="text" style="width:415px;" size="30" name="Display">
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><input class="calc-btn" data-role="number" type="button" value="7"></td>
<td><input class="calc-btn" data-role="number" type="button" value="8"></td>
<td><input class="calc-btn" data-role="number" type="button" value="9"></td>
<td><input class="calc-btn" data-role="operator" type="button" value="+"></td>
</tr>
<tr>
<td><input class="calc-btn" data-role="number" type="button" value="4"></td>
<td><input class="calc-btn" data-role="number" type="button" value="5"></td>
<td><input class="calc-btn" data-role="number" type="button" value="6"></td>
<td><input class="calc-btn" data-role="operator" type="button" value="-"></td>
</tr>
<tr>
<td><input class="calc-btn" data-role="number" type="button" value="1"></td>
<td><input class="calc-btn" data-role="number" type="button" value="2"></td>
<td><input class="calc-btn" data-role="number" type="button" value="3"></td>
<td><input class="calc-btn" data-role="operator" type="button" value="*"></td>
</tr>
<tr>
<td><input class="clear-btn" type="button" value="C"></td>
<td><input class="calc-btn" data-role="number" type="button" value="0"></td>
<td><input class="calculate-btn" type="button" value="="></td>
<td><input class="calc-btn" data-role="operator" type="button" value="/"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<script type="text/javascript">
$(".calc-btn").on('click',function(){
if($(this).attr('data-role')!='operator'){
$(".display").val($(".display").val()+$(this).val());
}
else{
if($(".display").val()!=''){
$(".display").val($(".display").val()+$(this).val());
}
}
});
$(".clear-btn").on('click',function(){
$(".display").val('');
});
$(".calculate-btn").on('click',function(){
var expression = $(".display").val();
$(".display").val(eval(expression));
});
</script>
Basic calculators are straightforward tools that handle addition, subtraction, multiplication, and division, making them suitable for everyday tasks such as balancing checkbooks or performing simple math problems.
In addition to these physical devices, there are also software-based calculators available on computers and smartphones. These range from basic calculator apps to sophisticated software capable of performing symbolic mathematics and extensive data analysis.
You may also like : Lottery Lucky Draw generator using JavaScript
Modern technology has also integrated calculators into various applications, enhancing productivity and accessibility across different platforms.
A web browser calculator is an online tool or built-in feature in modern web browsers that allows users to perform mathematical calculations without needing a separate physical device or standalone application. These calculators are easily accessible and offer various functionalities depending on their design and purpose.
