JavaScript

How to make a calculator program in JavaScript

If you are new to JavaScript or getting started with JavaScript, then it is best to start by implementing a small and easy calculator program. In this post, we are going to learn how to make a very basic yet functional calculator using JavaScript.

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:

<script type="module" src="script.js"></script>

And the HTML file contains these lines:

<center>
      <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:

const operatorVar = prompt("Enter the operator that you want to use (*, -, +, \ )");

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 operand1 = prompt("Enter the First Value");
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:

function isDigit(input) {
  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:

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);
}

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:

else {
  alert("Invalid Operator");
}

The last step is to display the result variable to the user using the alert dialogue box:

alert("The result is : " + result);

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 operatorVar = prompt("Enter the operator that you want to use");

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:

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;
}

The complete code snippet is as:

const operatorVar = prompt("Enter the operator that you want to use");

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.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.