Amena
Let's make a Basic Calculator with JS in 4 minutes

Let's make a Basic Calculator with JS in 4 minutes

Amena 💫's photo
Amena 💫
·

4 min read

Table of contents

Hello Legends👋

So, in this article I am gonna show you guys that how to make a basic calculator with JavaScript in 2 minutes only!

So without any further do let's get started...

1. Open VS code💡

Step 1. In VS code install your live server Extension!!

image.png

Step 2. After installing Live server extension click on Go live:

image.png

You can clearly see where is Go live👆

Now let's start to code:👩‍💻

2. Connect with HTML: (Create index.html)

<html>
  <head>
    <script src="calc.js"></script>
  </head>
  <body></body>
</html>

3. Start code (Create Variable) 💡

Create a new file like I have created calc.js

let op;

4. Take input✨

for taking input we are having a function called prompt() the prompt() function always output a string...

let op = prompt("Enter operation (+, -, *, /)");

Make sure guys that you must click ctrl + s after every change!! Go to your browser and refresh it.

You'll see:

image.png

Yeeeeeeeeeepeeee!!

5. Take 1st and 2nd number as input🧶

let op = prompt("Enter operation (+, -, *, /)");
let firstNumber = prompt("Enter first number");
let secondNumber = prompt("Enter second number");

Here we have made 2 variables firstNumber and secondNumber and we have taken input by prompt function!!

**Now see the magic: **

1st put an operation: (I have put + operator) 👇

image.png

2nd :Enter First number:👇 (I have putted 2)

image.png

3rd :Enter Second number:👇 (I have putted 3)

image.png

So, we are not getting anything right??

Let's make it to calculate the numbers!!

6. If statement for addition➕

let op = prompt("Enter operation (+, -, *, /)");
let firstNumber = prompt("Enter first number");
let secondNumber = prompt("Enter second number");

if (op == "+") {
  document.write(+firstNumber + +secondNumber);
}

6.1 String to Number

So guys let's assume if I write here:document.write(firstNumber + secondNumber) then the output would come jointed like

if I enter the operation + and first number 2 and second number 3 then it would come 23 because we had not converted into a number it is still a string only!

So If I convert it into a number it would come to the correct total like 2+3 = 5 to convert a string to a number I have used + sign LIKE THIS:👇

if (op == "+") {
  document.write(+firstNumber + +secondNumber);
}

Isn't it interesting...

Here we have created the addition method!🎉🎈🥳🎊

7. Else If statement for subtraction➖

let op = prompt("Enter operation (+, -, *, /)");

if (op != "+" && op != "-" && op != "/" && op != "*") {
  document.write("Invalid operation (please try again!)");
} else {
  let firstNumber = prompt("Enter first number");
  let secondNumber = prompt("Enter second number");

  if (op == "+") {
    document.write(+firstNumber + +secondNumber);
  } else if (op == "-") {
    document.write(+firstNumber - +secondNumber);
  } 
}

Here we have created the subtraction method too🤩

8. Else If statement for multiplication✖

let op = prompt("Enter operation (+, -, *, /)");

if (op != "+" && op != "-" && op != "/" && op != "*") {
  document.write("Invalid operation (please try again!)");
} else {
  let firstNumber = prompt("Enter first number");
  let secondNumber = prompt("Enter second number");

  if (op == "+") {
    document.write(+firstNumber + +secondNumber);
  } else if (op == "-") {
    document.write(+firstNumber - +secondNumber);
  } else if (op == "*") {
    document.write(+firstNumber * +secondNumber);
  } else if (op == "/") {
    document.write(+firstNumber / +secondNumber);
  }
}

A multiplication feature also added😊

9. Else If statement for division➗

let op = prompt("Enter operation (+, -, *, /)");

if (op != "+" && op != "-" && op != "/" && op != "*") {
  document.write("Invalid operation (please try again!)");
} else {
  let firstNumber = prompt("Enter first number");
  let secondNumber = prompt("Enter second number");

  if (op == "+") {
    document.write(+firstNumber + +secondNumber);
  } else if (op == "-") {
    document.write(+firstNumber - +secondNumber);
  } else if (op == "*") {
    document.write(+firstNumber * +secondNumber);
  } else if (op == "/") {
    document.write(+firstNumber / +secondNumber);
  }
}

Here we have created all the basic things like +, -, *, /😀

You can check it out after reading it!!

Now, the calculator is ready but but but... if the user enters something else instead of +, -, *, / so what do we do?? We are also having the right solution of it!!!!!!🎉🎉

Let's do that!!👇

10. Solution💎

let op = prompt('Enter operation (+, -, *, /)')

if (op != "+" && op != "-" && op != "/" && op != "*") {
  document.write("Invalid operation (please try again!)")
} else {
  let firstNumber = prompt('Enter first number')
  let secondNumber = prompt('Enter second number')
}

This is because if the user puts something else so it would come invalid operation(please try again!!

Like if I put any letter or number or any other sign it would come: 👇

image.png

And if I put the correct operation like (+, -, *, /) It works!!🎉

11. Final Code (Basic Calculator done )🔑

So guys, hope you enjoyed this 3 minutes basic calculator-making process!!

For now goodbye! 👋🙋‍♀️

JavaScriptjslearningLearn Code OnlineBeginner Developers