Post
Ask Question

Simple Calculator Using jQuery

In my previous blog, I have demonstrated how to create a simple calculator app using C# and Console Application. In this one, I will show how to create the application, i.e., a simple calculator using jQuery (library of JS) and HTML. The app will help a user quickly solve arithmetic problems like addition, subtraction, multiplication, and division.
 
Step 1
 
Open an editor, Visual Studio Code or Sublime Text. Here, I have used Visual Studio Code, a source code editor developed by Microsoft. Open a new window. Create a new file and name it as SimpleCalculator.html as shown below.
 
Simple Calculator Using jQuery
 
Step 2
 
In the following code snippet, I have created four functional blocks: Add, Subtract, Multiply and Divide. Each block is responsible for performing a specific task. Also, there are four separate buttons with a unique id and each button (through id) is attached with a click event. For example, on clicking the add button, the Add() method gets triggered and addition operation is performed. Likewise, the same happens on clicking the other buttons.
  1. <html>    
  2.     <head>    
  3.     <title>    
  4.         Simple Calculator    
  5.     </title>    
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>    
  7.     <script>    
  8.         //cdn//    
  9.         $(document).ready(function(){    
  10.             $("#btnAdd").on('click',function(){    
  11.                 Add();    
  12.             });    
  13.             $("#btnSubstract").on('click',function(){    
  14.                 Substract();    
  15.             })    
  16.             $("#btnMultiply").on('click',function(){    
  17.                 Multiply();    
  18.             })    
  19.             $("#btnDivide").on('click',function(){    
  20.                 Divide();    
  21.             })    
  22.         });    
  23.         function Add(){    
  24.          var no1=parseInt($("#txtNo1").val());    
  25.          var no2=parseInt($("#txtNo2").val());    
  26.          var result =no1+no2;    
  27.           alert("The result is "+result);    
  28.         }    
  29.         function Substract(){    
  30.          var no1=parseInt($("#txtNo1").val());    
  31.          var no2=parseInt($("#txtNo2").val());    
  32.          var result =no1-no2;    
  33.           alert("The result is "+result);    
  34.         }    
  35.         function Multiply(){    
  36.          var no1=parseInt($("#txtNo1").val());    
  37.          var no2=parseInt($("#txtNo2").val());    
  38.          var result =no1*no2;    
  39.           alert("The result is "+result);    
  40.         }    
  41.         function Divide(){    
  42.          var no1=parseInt($("#txtNo1").val());    
  43.          var no2=parseInt($("#txtNo2").val());    
  44.          var result =no1/no2;    
  45.           alert("The result is "+result);    
  46.         }    
  47.     </script>    
  48.     </head>    
  49.     <body>    
  50.        First Number <input type="text" id="txtNo1" placeholder="Enter first number"><br>    
  51.         Second Number<input type="text" id="txtNo2" placeholder="Enter second number"><br>    
  52.         <input type="button" id="btnAdd" value="Add">    
  53.         <input type="button" id="btnSubstract" value="Substract">    
  54.         <input type="button" id="btnMultiply" value="Multiply">    
  55.         <input type="button" id="btnDivide" value="Divide">    
  56.     </body>    
  57.     </html>   
Step 3
 
Run the application. The application gets opened in a browser as shown in the figure below. There are two input boxes and four buttons - Add, Subtract, Multiply, and Divide.
 
Simple Calculator Using jQuery
Enter the first and the second number and hit the "Add" button. The result gets displayed through an alert box. To perform other operations, hit the other desired button.
 
Simple Calculator Using jQuery
 
In this blog, we have learned how to create and use a simple calculator app written in Jquery and HTML. I hope you have enjoyed it.
Next Recommended Reading How to Add Item and Edit Row using PopUp Dialog in HTML Table using JQuery