2023-10-03 23:06:45 -04:00
|
|
|
let screen = document.querySelector('.screen');
|
2023-10-04 21:52:07 -04:00
|
|
|
const buttons = document.querySelectorAll('.btn');
|
2023-10-03 23:06:45 -04:00
|
|
|
|
2023-10-04 21:52:07 -04:00
|
|
|
const ops = {
|
|
|
|
firstNum: String(),
|
|
|
|
secondNum: String(),
|
|
|
|
operator: undefined,
|
|
|
|
numFlag: false,
|
2023-10-03 23:06:45 -04:00
|
|
|
|
2023-10-04 21:52:07 -04:00
|
|
|
updateNum: (num) => {
|
|
|
|
if (!this.updateSecondNum){
|
|
|
|
this.firstNum = num;
|
|
|
|
} else {
|
|
|
|
this.secondNum = num;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
toggleNumFlag: function() {
|
|
|
|
this.numFlag = !this.numFlag
|
|
|
|
},
|
|
|
|
clear: function(){
|
2023-10-05 23:44:22 -04:00
|
|
|
this.firstNum = String();
|
|
|
|
this.secondNum = String();
|
2023-10-04 21:52:07 -04:00
|
|
|
this.operator = undefined;
|
|
|
|
this.numFlag = false;
|
2023-10-05 23:44:22 -04:00
|
|
|
screen.textContent = "0";
|
2023-10-04 21:52:07 -04:00
|
|
|
}
|
|
|
|
};
|
2023-10-03 14:05:11 -04:00
|
|
|
|
|
|
|
function add(x, y) {
|
2023-10-04 21:52:07 -04:00
|
|
|
return x + y;
|
2023-10-03 14:05:11 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
function subtract(x, y) {
|
|
|
|
return x - y;
|
|
|
|
}
|
|
|
|
|
|
|
|
function multiply(x, y) {
|
|
|
|
return x * y;
|
|
|
|
}
|
|
|
|
|
|
|
|
function divive(x, y) {
|
|
|
|
if (x === 0) {
|
|
|
|
return 0
|
|
|
|
} else if (y === 0) {
|
|
|
|
alert("Cannot divide by 0!");
|
|
|
|
}
|
|
|
|
return x / y;
|
|
|
|
}
|
|
|
|
|
|
|
|
function operate(firstNum, secondNum, operator) {
|
2023-10-05 23:44:22 -04:00
|
|
|
console.log(operator);
|
2023-10-03 14:05:11 -04:00
|
|
|
switch (operator) {
|
|
|
|
case '+':
|
|
|
|
return add(firstNum, secondNum);
|
|
|
|
case '-':
|
|
|
|
return subtract(firstNum, secondNum);
|
|
|
|
case '*':
|
|
|
|
return multiply(firstNum, secondNum);
|
|
|
|
case '/':
|
|
|
|
return divive(firstNum, secondNum);
|
|
|
|
}
|
|
|
|
}
|
2023-10-03 23:06:45 -04:00
|
|
|
|
2023-10-05 23:44:22 -04:00
|
|
|
function handleOperation() {
|
|
|
|
first = Number(ops.firstNum);
|
|
|
|
second = Number(ops.secondNum);
|
|
|
|
let result = operate(first, second, ops.operator);
|
|
|
|
updateDisplay(result);
|
|
|
|
ops.operator = undefined;
|
|
|
|
ops.firstNum = result;
|
|
|
|
ops.secondNum = String();
|
|
|
|
ops.numFlag = false;
|
|
|
|
}
|
|
|
|
|
2023-10-03 23:06:45 -04:00
|
|
|
function updateDisplay(displayValue) {
|
2023-10-04 21:52:07 -04:00
|
|
|
screen.textContent = displayValue;
|
|
|
|
}
|
|
|
|
|
2023-10-05 22:24:31 -04:00
|
|
|
function handleOperatorClick(operatorClicked) {
|
|
|
|
|
|
|
|
// TODO handle ops for = or clear
|
|
|
|
if (operatorClicked === '=' || operatorClicked === 'cls') {
|
2023-10-05 23:44:22 -04:00
|
|
|
if (operatorClicked === 'cls') {
|
|
|
|
ops.clear();
|
|
|
|
}
|
|
|
|
if (operatorClicked === '=') {
|
|
|
|
handleOperation();
|
|
|
|
}
|
2023-10-05 22:24:31 -04:00
|
|
|
}
|
|
|
|
ops.operator = operatorClicked;
|
|
|
|
//TODO fix this conditional should be if numFlag and a check if = or additional ops
|
2023-10-05 23:44:22 -04:00
|
|
|
if(ops.secondNum && ops.numFlag){
|
|
|
|
handleOperation();
|
|
|
|
console.log("this should be second num doing stuff");
|
2023-10-05 22:24:31 -04:00
|
|
|
} else {
|
|
|
|
ops.toggleNumFlag();
|
|
|
|
console.log('set second num');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-10-04 21:52:07 -04:00
|
|
|
function calculator(event){
|
|
|
|
|
|
|
|
if(event.target.dataset.ops === "") {
|
2023-10-05 22:24:31 -04:00
|
|
|
handleOperatorClick(event.target.value);
|
2023-10-04 21:52:07 -04:00
|
|
|
}
|
|
|
|
else if(event.target.dataset.num === "") {
|
|
|
|
if(!ops.numFlag) {
|
|
|
|
ops.firstNum += event.target.value;
|
|
|
|
updateDisplay(ops.firstNum);
|
|
|
|
} else {
|
|
|
|
ops.secondNum += event.target.value;
|
|
|
|
updateDisplay(ops.secondNum);
|
|
|
|
}
|
2023-10-03 23:06:45 -04:00
|
|
|
}
|
2023-10-04 21:52:07 -04:00
|
|
|
|
|
|
|
// if (currentScreen.length >= 8) return;
|
|
|
|
|
2023-10-03 23:06:45 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
buttons.forEach(btn => {
|
2023-10-04 21:52:07 -04:00
|
|
|
btn.addEventListener('click', calculator);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
user imputs 1stNumber up to 8 digits or until user presses operator
|
|
|
|
number should be stored. each input evauluating for operator
|
|
|
|
1st number constantly updating
|
|
|
|
operator stored
|
|
|
|
user then enters 2nd Number up to 8 digits or until operator pressed
|
|
|
|
if user presses equals result is stored
|
|
|
|
if user presses operator result is saved to 1st number
|
|
|
|
|
|
|
|
|
|
|
|
*/
|