🧮 Calculator App - Interactive calculator with basic operations, clear, and display. Perfect beginner project!
📚 Concepts Covered:
• DOM Manipulation
• Event Listeners
• String operations
• eval() function
• Error handling
✨ Features:
• Add, Subtract, Multiply, Divide
• Clear button
• Display result
• Handle errors
javascript
// Calculator App (Console version)
class Calculator {
constructor() {
this.display = "0";
this.currentValue = "0";
this.previousValue = null;
this.operator = null;
}
inputNumber(num) {
if (this.display === "0") {
this.display = String(num);
} else {
this.display += String(num);
}
return this.display;
}
inputOperator(op) {
this.previousValue = parseFloat(this.display);
this.operator = op;
this.display = "0";
return `Operator: ${op}`;
}
calculate() {
const current = parseFloat(this.display);
const previous = this.previousValue;
let result = 0;
switch(this.operator) {
case '+': result = previous + current; break;
case '-': result = previous - current; break;
case '*': result = previous * current; break;
case '/':
if (current === 0) return "Error: Division by zero";
result = previous / current;
break;
default: return this.display;
}
this.display = String(result);
this.operator = null;
this.previousValue = null;
return result;
}
clear() {
this.display = "0";
this.currentValue = "0";
this.previousValue = null;
this.operator = null;
return "Cleared";
}
}
// Demo usage
const calc = new Calculator();
console.log("Input: 10"); calc.inputNumber(10);
console.log("Operator: +"); calc.inputOperator('+');
console.log("Input: 5"); calc.inputNumber(5);
console.log(`Result: ${calc.calculate()}`);
console.log(calc.clear());You should see
Input: 10 Operator: + Input: 5 Result: 15 Cleared