Challenge Day 3
Interactive Calculator
Day 3 of this coding challenge really made me frown but also smile when I finally got it working. I was challenged to create a simple interactive calculator using JavaScript with proper input validation and looping functionality.
At first I wrote it like this:
Initial Attempt
const num1 = prompt("Enter first number");
const num2 = prompt("Enter second number");
const num1 = prompt("Enter operator (+, -, *, /)");
Yes, I mistakenly reused num1, and the operator prompt was completely wrong. Then I went ahead and created a switch:
Switch Statement Attempt
switch(num1){
case = "+":
console.log(num1 + num2)
}
First problem? The numbers we get from prompt() are strings, not numbers. So if we add them directly, they get concatenated instead of summed. For example: "2" + "3" = "23", not 5. The solution? Use parseFloat() so it can handle decimal numbers too.
Number Conversion
const number1 = parseFloat(num1);
const number2 = parseFloat(num2);
let result; // Prepared to store the operation result
Refactored Version
After that, I refactored it to look like this:
If-Else Implementation
const num1 = prompt("Enter first number");
const num2 = prompt("Enter second number");
const operator = prompt("Enter operator (+, -, *, /)");
const number1 = parseFloat(num1);
const number2 = parseFloat(num2);
let result;
if (operator === "+"){
result = number1 + number2;
} else if (operator === "-"){
result = number1 - number2;
} else if (operator === "*"){
result = number1 * number2;
} else if (operator === "/"){
result = number1 / number2;
} else {
result = "Unknown result";
}
console.log("Result: " + result);
At this point it was working, but could still be improved. Enter the bonus challenge:
Bonus Challenge:
- Validate input to ensure it's actually numbers using
isNaN() - Replace
if-elsewithswitch-casefor cleaner code - Display results in an attractive format like: "📊 The result of 10 / 2 is 5"
Final Version with Validation and switch-case:
Switch Statement Solution
const num1 = prompt("Enter first number");
const num2 = prompt("Enter second number");
const operator = prompt("Enter operator (+, -, *, /)");
const number1 = parseFloat(num1);
const number2 = parseFloat(num2);
if (isNaN(number1) || isNaN(number2)) {
console.log("❌ Input is not a valid number!");
} else {
let result;
switch(operator) {
case "+": result = number1 + number2; break;
case "-": result = number1 - number2; break;
case "*": result = number1 * number2; break;
case "/": result = number2 === 0 ? "⚠️ Error: division by zero" : number1 / number2; break;
default:
result = "❌ Operator not recognized. Please use +, -, *, or /.";
}
if (typeof result === "string") {
console.log(result);
} else {
console.log(`📊 The result of ${num1} ${operator} ${num2} is ${result}`);
}
}
Level Up! Adding Function and Looping
I felt this could be made even cleaner with functions and loops. Functions for reusability, loops to recalculate without refreshing the page.
Final modular and interactive version:
Function + Loop Implementation
let continueCalc = true;
while (continueCalc) {
const num1 = prompt("Enter first number");
const num2 = prompt("Enter second number");
const operator = prompt("Enter operator (+, -, *, /)");
const number1 = parseFloat(num1);
const number2 = parseFloat(num2);
if (isNaN(number1) || isNaN(number2)) {
console.log("❌ Input is not a valid number!");
} else {
function calculate(num1, num2, operator) {
switch (operator) {
case "+": return num1 + num2;
case "-": return num1 - num2;
case "*": return num1 * num2;
case "/": return num2 === 0 ? "⚠️ Error: division by zero" : num1 / num2;
default: return "❌ Operator not recognized. Please use +, -, *, or /.";
}
}
const result = calculate(number1, number2, operator);
if (typeof result === "string") {
console.log(result);
} else {
console.log(`📊 The result of ${num1} ${operator} ${num2} is ${result}`);
}
}
continueCalc = confirm("Want to calculate again?");
}
