The Calculator is a commonly used portable tool for carrying out a range of mathematical operations like addition, subtraction, multiplication, division, and more. Additionally, there are advanced calculators designed for handling intricate tasks involving trigonometry, exponential calculations, logarithms, hyperbolic functions, square roots, and other complex operations. In this tutorial, we will develop a calculator application using JavaScript.
Example 1: Create a JavaScript Calculator using the JavaScript, HTML and CSS programming languages.
Build.html
<!-- Create a simple Program to build the Calculator in JavaScript using with HTML and CSS web languages. -->
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>
<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">
<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>
<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">
<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
Output
Upon execution in any web browser, the program will display the image depicted below.
Presented here is a Calculator application developed with JavaScript, incorporating HTML and CSS for web development. This Calculator enables users to execute fundamental mathematical operations such as addition, multiplication, subtraction, and division.
Next, we will execute certain operations within the JavaScript program, depicted as follows.
In the previous image, we executed addition and subtraction tasks by selecting the number button followed by the addition or subtraction operation. Subsequently, the '=' (equal) button was pressed to obtain the outcome of the operation. The subsequent image displays the outcomes of the numerical calculations.
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
<html>
<body>
<script>
// program to create a simple calculator using the if...else...if in JavaScript.
// take the operator from the user through prompt box in JavaScript.
const operator = prompt('Enter operator to perform the calculation ( either +, -, * or / ): ');
// accept the number from the user through prompt box
const number1 = parseFloat(prompt ('Enter the first number: '));
const number2 = parseFloat(prompt ('Enter the second number: '));
let result; // declaration of the variable.
// use if, elseif and else keyword to define the calculator condition in JavaScript.
if (operator == '+') { // use + (addition) operator to add two numbers
result = number1 + number2;
}
else if (operator == '-') { // use - (subtraction) operator to subtract two numbers
result = number1 - number2;
}
else if (operator == '*') { // use * (multiplication) operator to multiply two numbers
result = number1 * number2;
}
else {
result = number1 / number2; // use / (division) operator to divide two numbers
}
// display the result of the Calculator
window.alert(" Result is" + result);
</script>
<body>
</html>
Output
Upon running the provided code snippet, it generates the following output:
As illustrated in the image provided, the user is prompted to choose an operator to execute the calculation. The available operators include addition (+), subtraction (-), multiplication (*), and division (/).
In the screenshot provided, we are choosing to use the addition (+) operator, followed by clicking on the OK button.
Upon selecting the OK button, the following image is displayed to prompt the user to input the initial number.
Once more, we proceed by clicking the OK button, prompting the display of the following image to request the second number input from the user.
To obtain the sum of the two numbers, simply click on the OK button as demonstrated in the following example.
Likewise, we have the ability to carry out subtraction, multiplication, and division operations on numbers using the JavaScript Calculator.
Example 3: Dynamic JavaScript Calculator using the HTML, CSS and JavaScript.
Calc.html
<!-- Write a program to build the Calculator in JavaScript. -->
<!DOCTYPE html>
<html>
<head>
<title>
Calculator Program in JavaScript
</title>
<!-- Begins the JavaScript Code -->
<script>
// Use insert() function to insert the number in textview.
function insert(num)
{
document.form1.textview.value = document.form1.textview.value + num;
}
// Use equal() function to return the result based on passed values.
function equal()
{
var exp = document.form1.textview.value;
if(exp)
{
document.form1.textview.value = eval(exp)
}
}
/* Here, we create a backspace() function to remove the number at the end of the numeric series in textview. */
function backspace()
{
var exp = document.form1.textview.value;
document.form1.textview.value = exp.substring(0, exp.length - 1); /* remove the element from total length ? 1 */
}
</script>
<!-- Start the coding for CSS -->
<style>
/* Create the Outer layout of the Calculator. */
.formstyle
{
width: 300px;
height: 330px;
margin: 20px auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
text-align: center;
background-color: grey;
}
/* Display top horizontal bar that contain some information. */
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
input:hover
{
background-color: green;
}
*{
margin: 0;
padding: 0;
}
/* It is used to create the layout for calculator button. */
.btn{
width: 50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
background-color: red;
color: white;
}
/* It is used to display the numbers, operations and results. */
.textview{
width: 223px;
margin: 5px;
font-size: 25px;
padding: 5px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">
<input class= "textview" name = "textview">
</form>
<center>
<table >
<tr>
<td> <input class = "btn" type = "button" value = "C" onclick = "form1.textview.value = ' ' " > </td>
<td> <input class = "btn" type = "button" value = "B" onclick = "backspace()" > </td>
<td> <input class = "btn" type = "button" value = "/" onclick = "insert('/')" > </td>
<td> <input class = "btn" type = "button" value = "x" onclick = "insert('*')" > </td>
</tr>
<tr>
<td> <input class = "btn" type = "button" value = "7" onclick = "insert(7)" > </td>
<td> <input class = "btn" type = "button" value = "8" onclick = "insert(8)" > </td>
<td> <input class = "btn" type = "button" value = "9" onclick = "insert(9)" > </td>
<td> <input class = "btn" type = "button" value = "-" onclick = "insert('-')" > </td>
</tr>
<tr>
<td> <input class = "btn" type = "button" value = "4" onclick = "insert(4)" > </td>
<td> <input class = "btn" type = "button" value = "5" onclick = "insert(5)" > </td>
<td> <input class = "btn" type = "button" value = "6" onclick = "insert(6)" > </td>
<td> <input class = "btn" type = "button" value = "+" onclick = "insert('+')" > </td>
</tr>
<tr>
<td> <input class = "btn" type = "button" value = "1" onclick = "insert(1)" > </td>
<td> <input class = "btn" type = "button" value = "2" onclick = "insert(2)" > </td>
<td> <input class = "btn" type = "button" value = "3" onclick = "insert(3)" > </td>
<td rowspan = 5> <input class = "btn" style = "height: 110px" type = "button" value = "=" onclick = "equal()"> </td>
</tr>
<tr>
<td colspan = 2> <input class = "btn" style = "width: 106px" type = "button" value = "0" onclick = "insert(0)" > </td>
<td> <input class = "btn" type = "button" value = "." onclick = "insert('.')"> </td>
</tr>
</table>
</center>
</div>
</body>
</html>
Output
Upon running the program in any web browser, the image depicted below will be displayed.
In the JavaScript Calculator, various operations can be executed by selecting the numeric button, as demonstrated below:
Upon completing the necessary operations, proceed to select the ' = ' (equal) button to showcase the outcome on the JavaScript Calculator's display.
Moreover, we have the option to eliminate the presented outcome or an incorrect digit sequentially from the backend by selecting the B ( Back ) button. Should the need arise to erase the fully visible digit, simply tap on the C ( Cancel ) button located on the Calculator interface.