Javatpoint Logo
Javatpoint Logo

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

Test it Now

Output

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

JavaScript Calculator

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.

JavaScript Calculator

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.

JavaScript Calculator

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

Test it Now

Output

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

JavaScript Calculator

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.

JavaScript Calculator

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

JavaScript Calculator

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

JavaScript Calculator

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

JavaScript Calculator

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

Test it Now

Output

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

JavaScript Calculator

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

JavaScript Calculator

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

JavaScript Calculator

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.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA