To take inputs and to display the output to the user, we are going to be using the prompt and the alert functions of the browser respectively.
There are two main ways of implementing the functionality of a calculator, first is by using the if-else statements, and the other way is to use the switch statements we are going to cover both of them.
Step 1: Set up the environment
Create a new HTML file, link a script.js file using the script tag and execute the HTML file so that it runs on the browser, the script tag looks like this:
And the HTML file contains these lines:
<div><p>A simple calculator</p></div>
</center>
Step 2: Writing the JavaScript code
The first thing we need to do in our JavaScript code, is to notify the user to input an operator (* , – , + , /). To do that, we create a new variable and prompt the user for a new input which will be placed in that variable:
Next step is to ask the user for the operands on which this operator will work, we do that using the following lines of code:
const operand2 = prompt("Enter the Second Value");
We need to confirm that the user didn’t make any wrong inputs with the following lines of code:
var integer = true;
for (var char of input) {
if (char `9`) {
integer = false;
}
}
return integer;
}
if (isDigit(operand1) == false) {
alert("Wrong input at operand 1| Not an integer Value");
}
if (isDigit(operand2) == false) {
alert("Wrong input at operand 2| Not an integer Value");
}
Next up, we need to check which operator was given by the user by using the if-else statements, perform the required operations and store the result in a new variable:
result = operand1 * operand2;
} else if (operatorVar == "-") {
result = operand1 - operand2;
} else if (operatorVar == "/") {
result = operand1 / operand2;
} else if (operatorVar == "+") {
result = parseInt(operand1) + parseInt(operand2);
}
We need to check for a wrong operator as well, for that we will simply use the else statement and alert the user that a wrong input was made:
alert("Invalid Operator");
}
The last step is to display the result variable to the user using the alert dialogue box:
You are done with coding the calculator on JavaScript.
Step 3: Testing the calculator
To test the calculator you just coded, simply run the HTML file and type in the prompt boxes as they appear as shown in the gif below:
As you can see the test was a success because our calculator works perfectly fine, the complete Code snippet is as:
const operand1 = prompt("Enter the First Value");
if (isDigit(operand1) == false) {
alert("Wrong input at operand 1| Not an integer Value");
}
const operand2 = prompt("Enter the Second Value");
if (isDigit(operand2) == false) {
alert("Wrong input at operand 2| Not an integer Value");
}
var result;
if (operatorVar == "*") {
result = operand1 * operand2;
} else if (operatorVar == "-") {
result = operand1 - operand2;
} else if (operatorVar == "/") {
result = operand1 / operand2;
} else if (operatorVar == "+") {
result = parseInt(operand1) + parseInt(operand2);
} else {
alert("Invalid Operator");
}
alert("The result is : " + result);
function isDigit(input) {
var integer = true;
for (var char of input) {
if (char `9`) {
integer = false;
}
}
return integer;
}
Step 4: Using Switch instead of if-else
To use switch instead of if-else simple replace the if-else statements with the following lines of code:
case "*":
result = operand1 * operand2;
break;
case "/":
result = operand1 / operand2;
break;
case "+":
result = parseInt(operand1) + parseInt(operand2);
break;
case "-":
result = operand1 - operand2;
break;
default:
alert("Invalid Operator!");
break;
}
The complete code snippet is as:
const operand1 = prompt("Enter the First Value");
if (isDigit(operand1) == false) {
alert("Wrong input at operand 1| Not an integer Value");
}
const operand2 = prompt("Enter the Second Value");
if (isDigit(operand2) == false) {
alert("Wrong input at operand 2| Not an integer Value");
}
var result;switch (operatorVar) {
case "*":
result = operand1 * operand2;
break;
case "/":
result = operand1 / operand2;
break;
case "+":
result = parseInt(operand1) + parseInt(operand2);
break;
case "-":
result = operand1 - operand2;
break;
default:
alert("Invalid Operator!");
break;
}
alert("The result is : " + result);
function isDigit(input) {
var integer = true;
for (var char of input) {
if (char `9`) {
integer = false;
}
}
return integer;
}
All that is left now is to test this code, take a look at the gif below:
That is it, you have coded a simple calculator using JavaScript.
Conclusion
Learning a new language requires you to build real-life applications; when you are starting out with learning JavaScript, a calculator program is really useful and an easy way to get the hang of JavaScript. Today, in this post, we learned how to create a very basic calculator program using JavaScript by using both the if-else statements as well as the switch statements.
