# 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.

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>
3.     <title>
4.         Simple Calculator
5.     </title>
7.     <script>
8.         //cdn//
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.         });
24.          var no1=parseInt(\$("#txtNo1").val());
25.          var no2=parseInt(\$("#txtNo2").val());
26.          var result =no1+no2;
28.         }
29.         function Substract(){
30.          var no1=parseInt(\$("#txtNo1").val());
31.          var no2=parseInt(\$("#txtNo2").val());
32.          var result =no1-no2;
34.         }
35.         function Multiply(){
36.          var no1=parseInt(\$("#txtNo1").val());
37.          var no2=parseInt(\$("#txtNo2").val());
38.          var result =no1*no2;
40.         }
41.         function Divide(){
42.          var no1=parseInt(\$("#txtNo1").val());
43.          var no2=parseInt(\$("#txtNo2").val());
44.          var result =no1/no2;
46.         }
47.     </script>
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>