Skip to content

Commit

Permalink
everything setup functioning and everything
Browse files Browse the repository at this point in the history
  • Loading branch information
Devansh committed Nov 4, 2024
1 parent df1c2aa commit a48506a
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 30 deletions.
20 changes: 11 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -63,33 +65,33 @@

</div>
<div class="horizontalContainer">
<button class="calcKeysBtn" style="background-color: indianred" type="button" value="clear">AC</button>
<button class="calcKeysBtn operator" type="button" value="negation">+/-</button>
<button class="calcKeysBtn operator" type="button" value="percent">%</button>
<button class="calcKeysBtn operator" type="button" value="/">/</button>
<button class="calcKeysBtn clear" style="background-color: indianred" type="button" value="clear">AC</button>
<button class="calcKeysBtn sign" type="button" value="negation">+/-</button>
<button class="calcKeysBtn percent" type="button" value="percent">%</button>
<button class="calcKeysBtn operator" type="button" value="divide">/</button>
</div>
<div class="horizontalContainer">
<button class="calcKeysBtn number" type="button" value="7">7</button>
<button class="calcKeysBtn number" type="button" value="8">8</button>
<button class="calcKeysBtn number" type="button" value="9">9</button>
<button class="calcKeysBtn operator" type="button" value="*">*</button>
<button class="calcKeysBtn operator" type="button" value="multiply">*</button>
</div>
<div class="horizontalContainer">
<button class="calcKeysBtn number" type="button" value="4">4</button>
<button class="calcKeysBtn number" type="button" value="5">5</button>
<button class="calcKeysBtn number" type="button" value="6">6</button>
<button class="calcKeysBtn operator" type="button" value="-">-</button>
<button class="calcKeysBtn operator" type="button" value="subtract">-</button>
</div>
<div class="horizontalContainer">
<button class="calcKeysBtn number" type="button" value="1">1</button>
<button class="calcKeysBtn number" type="button" value="2">2</button>
<button class="calcKeysBtn number" type="button" value="3">3</button>
<button class="calcKeysBtn operator" type="button" value="+">+</button>
<button class="calcKeysBtn operator" type="button" value="add">+</button>
</div>
<div class="horizontalContainer">
<button class="calcKeysBtn number" type="button" value="0" style="width: 49.2%">0</button>
<button class="calcKeysBtn float" type="button" value=".">.</button>
<button class="calcKeysBtn" type="button" value="=" style="background-color: #36c400">=</button>
<button class="calcKeysBtn decimal" type="button" value=".">.</button>
<button class="calcKeysBtn equals" type="button" value="=" style="background-color: #36c400">=</button>
</div>
</div>

Expand Down
222 changes: 201 additions & 21 deletions index.js
Original file line number Diff line number Diff line change
@@ -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();
}

})

0 comments on commit a48506a

Please sign in to comment.