Who wants to laugh at my unfinished calculator that doesn’t work at all, only displays number inputs?
I don’t have any specific questions–I’m working on this for class, and it’s important that I struggle through the assignment in order to learn. This week is my first exposure to JavaScript, though, so any thoughts from experienced developers are welcome!
You’ll noticed I’ve commented out some sections containing code that I’m setting aside for the moment but don’t want to completely discard yet.
// variables to track the current operator and stored value
let selectedOperator = '';
let storedValue = '';
let number = '';
let leftOperand = '';
let rightOperand = '';
// get references to the display and buttons
const display = document.getElementById('display');
const buttonOne = document.getElementById('one');
const buttonTwo = document.getElementById('two');
const buttonThree = document.getElementById('three');
const buttonFour = document.getElementById('four');
const buttonFive = document.getElementById('five');
const buttonSix = document.getElementById('six');
const buttonSeven = document.getElementById('seven');
const buttonEight = document.getElementById('eight');
const buttonNine = document.getElementById('nine');
const buttonZero = document.getElementById('zero');
const buttonPlus = document.getElementById('plus');
const buttonMinus = document.getElementById('minus');
const buttonMultiply = document.getElementById('multiply');
const buttonDivide = document.getElementById('divide');
const buttonEquals = document.getElementById('equals');
const buttonReset = document.getElementById('reset');
const buttonClear = document.getElementById('clear');
// number button event listeners
buttonOne.addEventListener('click', function () {
handleNumberClick('1');
})
buttonTwo.addEventListener('click', function () {
handleNumberClick('2');
})
buttonThree.addEventListener('click', function () {
handleNumberClick('3');
})
buttonFour.addEventListener('click', function () {
handleNumberClick('4');
})
buttonFive.addEventListener('click', function () {
handleNumberClick('5');
})
buttonSix.addEventListener('click', function () {
handleNumberClick('6');
})
buttonSeven.addEventListener('click', function () {
handleNumberClick('7');
})
buttonEight.addEventListener('click', function () {
handleNumberClick('8');
})
buttonNine.addEventListener('click', function () {
handleNumberClick('9');
})
buttonZero.addEventListener('click', function () {
handleNumberClick('0');
})
// operator button event listeners
buttonPlus.addEventListener('click', function () {
selectedOperator = '+';
handleOperator('+');
return selectedOperator;
})
buttonMinus.addEventListener('click', function () {
selectedOperator = '-';
handleOperator('-');
return selectedOperator;
})
buttonMultiply.addEventListener('click', function () {
selectedOperator = '*';
handleOperator('*');
return selectedOperator;
})
buttonDivide.addEventListener('click', function () {
selectedOperator = '/';
handleOperator('/');
return selectedOperator;
})
// handle number inputs
function handleNumberClick(number) {
if (selectedOperator === '') {
// if no operator is selected, append the number to the end of the stored number sequence
leftOperand += number;
display.value = leftOperand;
storedValue = leftOperand;
} else {
// if an operator is selected, start a new number sequence
rightOperand += number;
display.value = rightOperand;
storedValue = leftOperand + rightOperand;
}
return storedValue;
}
// handleOperator function
function handleOperator(operator) {
// if no operator was already selected, append the operator to the end of the stored string
if (selectedOperator === '') {
display.value = leftOperand;
leftOperand += operator;
storedValue = leftOperand
} else {
// if an operator was already selected, perform the prior operation and display the result
display.value = parseFloat(leftOperand + rightOperand);
storedValue = display.value;
}
}
/* function handleOperator(operator) {
// get the current display and parse it as a number
const currentValue = display.value;
// check for '=' operator
if (operator === '=') {
selectedOperator = ''; // clear the selected operator
return; // return without performing any additional calculation
}
// when a value is stored and an operator is selected, perform the corresponding calculation
if (selectedOperator && storedValue !== '') {
// perform calculation based on previous operator
switch (selectedOperator) {
case '+':
storedValue += currentValue;
break;
case '-':
storedValue -= currentValue;
break;
case '*':
storedValue *= currentValue;
break;
case '/':
if (currentValue !== 0) {
storedValue /= currentValue;
} else {
// handle division by zero
clearCalculator();
display.value = 'Error';
storedValue = ''; // reset storedValue
selectedOperator = ''; // reset selectedOperator
return
}
break;
}
// display result
display.value = storedValue;
} else {
// set current value as stored value if there is no selected operator or stored value
storedValue = currentValue;
}
// update selected operator
selectedOperator = operator;
} */
// equals button event listener
buttonEquals.addEventListener('click', function () {
selectedOperator = '=';
handleOperator('=');
return selectedOperator;
})
// reset (C) event listener
buttonReset.addEventListener('click', function () {
clearCalculator();
})
// clear entry (CE) event listener
buttonClear.addEventListener('click', function () {
storedValue = ''; // clear storedValue
display.value = ''; // clear display
})
// function to clear (reset) the calculator (C)
function clearCalculator() {
currentInput = '';
storedValue = '';
selectedOperator = null;
updateDisplay();
}
// function to clear entry (CE)
function clearEntry() {
display.value = '';
}
// add function
/* function add() {
// get current display and parse it as a number
const currentValue = parseFloat(display.value);
// perform addition, update display
display.value = currentValue + parseFloat(display.value);
}
// subtract function
function subtract() {
// get current display and parse it as a number
const currentValue = parseFloat(display.value);
// perform subtraction, update display
display.value = currentValue - parseFloat(display.value);
}
// multiply function
function multiply() {
// get current display and parse it as a number
const currentValue = parseFloat(display.value);
// perform subtraction, update display
display.value = currentValue * parseFloat(display.value);
}
// divide function
function divide() {
// get current display and parse it as a number
const currentValue = parseFloat(display.value);
// perform subtraction, update display
display.value = currentValue / parseFloat(display.value);
} */