From a48506ad7367a9084b12adb3624b44a0be26ef9e Mon Sep 17 00:00:00 2001 From: Devansh Date: Tue, 5 Nov 2024 01:14:14 +0530 Subject: [PATCH] everything setup functioning and everything --- index.html | 20 ++--- index.js | 222 ++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 212 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 0bd5f51..76f50c6 100644 --- a/index.html +++ b/index.html @@ -20,10 +20,12 @@ height: 500px; width: 400px; background-color: black; + border-radius: 20px; } #screenDisplay{ box-sizing: border-box; + border-radius: 20px; background-color: #b09696; height: 20%; /*hence height of every vertical boxes will 80/5 that is 16%*/ width: 98%; @@ -63,33 +65,33 @@
- - - - + + + +
- +
- +
- +
- - + +
diff --git a/index.js b/index.js index 107bbd7..03e2c11 100644 --- a/index.js +++ b/index.js @@ -1,39 +1,219 @@ -document.addEventListener('DOMContentLoaded',function(){ - function add(a, b,) { - return a+b; +document.addEventListener('DOMContentLoaded',() =>{ + + /* functions to be made + * updatedisplay() + * operate() //this will be executed when equals is clicked or operator is clicked once again + * cleardisplay() this is for all clear + * + * Varibles to be defined are below + * firstoperand + * secondoperand + * displaynumber + * firstOperator + * secondOperator + * result + * */ + + //defined all variables below + let firstOperand = null; + let secondOperand = null; + let firstOperator = null; + let secondOperator = null; + let displayedNumber = '0'; + let result =null; + const buttons = document.querySelectorAll('.calcKeysBtn'); + + //updating the display as per the clicked button + function changeDisplay(){ + const screen = document.querySelector('#screenDisplay'); + screen.textContent = displayedNumber; } + changeDisplay(); + function clickButton(){ + buttons.forEach((button)=>{ + button.addEventListener('click',(event)=>{ + const clickedButton = event.target; + + if (clickedButton.classList.contains('number')){ + inputOperand(clickedButton.value); + changeDisplay(); + } + else if(clickedButton.classList.contains('operator')){ + console.log(clickedButton.value); + inputOperator(clickedButton.value); + changeDisplay(); + }else if(clickedButton.classList.contains('equals')){ + console.log(clickedButton.value); + equals(); + changeDisplay(); + }else if(clickedButton.classList.contains('percent')){ + inputPercent(displayedNumber); + changeDisplay(); + }else if(clickedButton.classList.contains('sign')){ + inputSign(displayedNumber); + changeDisplay(); + }else if(clickedButton.classList.contains('clear')){ + clearDisplay(); + changeDisplay(); + }else if(clickedButton.classList.contains('decimal')){ + inputDecimal(clickedButton.value); + changeDisplay(); + } + }) + }) - function multiply (a,b){ - return a*b; } + clickButton(); - function subtract (a,b){ - return a-b; + function inputOperand(operand){ + if (firstOperator === null ){ + if(displayedNumber === '0' || displayedNumber === 0 || displayedNumber === firstOperand){ + displayedNumber = operand; + }else { + displayedNumber += operand; + } + }else{ + //3th /5th click - inputs to second operand + if(displayedNumber === firstOperand){ + displayedNumber = operand; + }else{ + displayedNumber += operand; + } + } } - function divide (a,b){ - return a/b; + function inputOperator(operator){ + if(firstOperator != null && secondOperator === null ){ + //this is the 4th click operation + secondOperator = operator; + secondOperand = displayedNumber; + result = operate(Number(firstOperand),Number(secondOperand),firstOperator); + displayedNumber = result.toString(); + firstOperand = displayedNumber; + result = null; + + }else if(firstOperator != null && secondOperator != null ){ + //this is the 6th click operation to be performed + secondOperand = displayedNumber; + result = operate(Number(firstOperand),Number(secondOperand),secondOperator); + secondOperator = operator; + displayedNumber = result.toString(); + firstOperand = displayedNumber; + result = null; + }else{ + firstOperator = operator; + firstOperand = displayedNumber; + } } - function operate(a,b,operator){ - return operator(a,b); + // function operate(firstOperand,secondOperand,operator){ + // if(operator === 'add'){ + // return firstOperand + secondOperand; + // } + // else if(operator === 'subtract'){ + // return firstOperand - secondOperand; + // } + // else if(operator === 'multiply'){ + // return firstOperand * secondOperand; + // } + // else if(operator === 'divide') { + // if(secondOperand === 0) return 'dumbass'; + // else{ + // return firstOperand / secondOperand; + // } + // } + // } + + function operate(firstOperand, secondOperand, operator) { + switch (operator) { + case 'add': + case '+': + return firstOperand + secondOperand; + case 'subtract': + case '-': + return firstOperand - secondOperand; + case 'multiply': + case '*': + return firstOperand * secondOperand; + case 'divide': + case '/': + if (secondOperand === 0) return 'Error'; + return firstOperand / secondOperand; + default: + return null; + } } - let displayedAndClickedNumber = 0; - const displayContent = document.getElementById("screenDisplay"); - displayContent.textContent = `${displayedAndClickedNumber}`; - const numberKeys = document.querySelectorAll(".number"); + function equals(){ + if(firstOperator === null){ + displayedNumber = displayedNumber; - numberKeys.forEach((item) => { - item.addEventListener("click",(event)=>{ - displayedAndClickedNumber = event.target.value; - displayContent.textContent = `${displayedAndClickedNumber}`; - }) + }else if(secondOperator != null){ + //handling the final result + secondOperand = displayedNumber; + result = operate(Number(firstOperand),Number(secondOperand),secondOperator); + console.log(result.toString()); + if(result === 'dumbass'){ + displayedNumber = result.toString(); + }else{ + displayedNumber = result.toString(); + firstOperand = displayedNumber; + secondOperand = null; + firstOperator = null; + secondOperator = null; + result = null; + } + }else{ + //handling the first operation + secondOperand = displayedNumber ; + result = operate(Number(firstOperand),Number(secondOperand),firstOperator); + if(result === 'dumbass'){ + displayedNumber = result.toString(); + }else{ + displayedNumber = result.toString(); + firstOperand = displayedNumber; + secondOperand = null; + firstOperator = null; + secondOperator = null; + result = null; + } + } + } - }); + function inputDecimal(dot) { + if(displayedNumber === firstOperand || displayedNumber === secondOperand) { + displayedNumber = '0'; + displayedNumber += dot; + } else if(!displayedNumber.includes(dot)) { + displayedNumber += dot; + } + } + + function inputBackspace() { + if(firstOperand != null) { + firstOperand = null; + changeDisplay() + } + } + + function clearDisplay() { + displayedNumber = '0'; + firstOperand = null; + secondOperand = null; + firstOperator = null; + secondOperator = null; + result = null; + } + function inputPercent(operand){ + displayedNumber = (Number(displayedNumber) / 100).toString(); + } + function inputSign(operand){ + displayedNumber = (-Number(displayedNumber)).toString(); + } + }) \ No newline at end of file