JavaScript Calculator

As we know, the Calculator is a portable device used in our daily life to perform various mathematical functions such as addition, subtraction, multiplication, division, root, etc. However, we have scientific or sophisticated calculators used to solve complex tasks such as trigonometry functions, degrees, exponential operators, log functions, hyperbolic functions, square root, and so on. In this topic, we will create a calculator program in JavaScript.

Example 1: Create a JavaScript Calculator using the JavaScript, HTML and CSS programming languages.

Build.html

Output

When the above program is executed on any browser, it shows the below image.

Here we have created a Calculator program using the JavaScript language, including HTML and CSS web programming. In this Calculator, we can perform basic operations like addition, multiplication, subtraction, and division.

Now we perform some operation in the JavaScript program, as shown below.

We performed addition and subtraction operations in the above image by clicking on the numeric button and then addition & subtraction operations. After this, click on the '=' (equal) button to get the operation result. In the given below image, we can see the results of the numbers.

Note: If we want to remove all existing data from the Calculator, click on the Clear All button.

Create a JavaScript Calculator using If... Else...If statement and display using the prompt dialog box.

Result.html

Output

When we execute the above programming code, it produces the below Output:

As we can see in the above image, it asks for an operator to perform the calculation by selecting an operator like as +, -, *, or /.

In this image, we select an add (+) operator and then click the OK button, as shown below.

After clicking on the OK button, it shows the below image to take the first number from the user.

We again click on the OK button, it shows the below image to take the second number from the user.

Finally, click on the OK button to get the addition of the two numbers, as shown below.

Similarly, we can perform the subtraction, multiplication, and division of the number in JavaScript Calculator.

Example 3: Dynamic JavaScript Calculator using the HTML, CSS and JavaScript.

Calc.html

Output

When the above program is executed on any browser, it shows the below image.

Now we perform multiple operations in JavaScript Calculator by pressing the numeric button, as shown:

After performing the operations, click on the '=' (equal) button to return the JavaScript Calculator' Display result.

Furthermore, we can remove the displayed result or wrong number one by one at the back end by clicking on the B (Back) button. If we want to remove the completely visible number, press the C (Cancel) button from the Calculator.