- Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
Latest commit
162 lines (143 loc) · 6.31 KB
/
Copy pathscript.js
File metadata and controls
162 lines (143 loc) · 6.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
// Selecting DOM elements
constnumbers=document.querySelectorAll(".numbers");
constoperators=document.querySelectorAll(".operators");
constallClear=document.querySelector(".clear-all");
constclear=document.querySelector(".clear");
constdisplay=document.querySelector(".display-screen");
constdecimal=document.querySelector(".decimal");
// state Object
constcalculator={
displayVal: "0",
firstOperand: null,
waitingForSecondOperand: false,
operator: null,
}
// Function to check if Input is overflowed
functionisOverflown(element){
returnelement.scrollHeight>element.clientHeight||element.scrollWidth>element.clientWidth;
}
// Adjusting display screen fontSize according to input size
functionupdateInputWidth(){
letfontSize=parseInt((window.getComputedStyle(display).fontSize))
console.log(fontSize);
letpaddingBottom=parseInt((window.getComputedStyle(display).paddingBottom))
for(leti=fontSize;i>=35;i--){
letoverflow=isOverflown(display);
if(overflow){
fontSize-=4;
paddingBottom+=2;
display.style.fontSize=fontSize+"px";
display.style.paddingBottom=paddingBottom+"px";
}
}
}
// Reset Display function
functionresetDisplay(){
display.style.fontSize="4rem";
display.style.paddingBottom="0";
}
// Utility function to update Display screen
functionupdateDisplay(){
display.value=calculator.displayVal;
resetDisplay()
updateInputWidth();
}
// Updating screen at the start of application
updateDisplay();
// Displaying the digits (operand)
functiondisplayNum(e){
const{ displayVal, waitingForSecondOperand }=calculator;
// resetting display in case the display screen font size is smaller then default
resetDisplay();
// we check if waitingForSecondOperand is true and set displayValue to the key that was clicked. Otherwise, we perform the same check as before, overwriting or appending to calculator.displayValue as appropriate. This check is to overwrite firstOperand when we want to input the second one
if(waitingForSecondOperand===true){
calculator.displayVal=e.currentTarget.value;
calculator.waitingForSecondOperand=false;
}else{
if(displayVal.length<10){// limiting input to 10 numbers
// Check if there is already zero, if there is then display it as it is without appending and if there is other digit then zero then append the string to make the operand of more then 1 digit.
calculator.displayVal=displayVal==='0' ? e.currentTarget.value : displayVal+e.currentTarget.value;
}
}
updateDisplay();
}
// Calculation functions Object
constperfornCalculation={
'/': (firstOperand,secondOperand)=>firstOperand/secondOperand,
'*': (firstOperand,secondOperand)=>firstOperand*secondOperand,
'-': (firstOperand,secondOperand)=>{
// Condition for the weird JavaScript bug which shows 03.3 - 0.2 = 0.99999....8, so we check if we have same operands for the function. If they are 0.3 and 0.2 then we return 0.1 otherwise we return the calculated value
if(firstOperand===0.3&&secondOperand===0.2){
return0.1;
}else{
returnfirstOperand-secondOperand
}
},
'+': (firstOperand,secondOperand)=>firstOperand+secondOperand,
'%': (firstOperand,secondOperand)=>firstOperand%secondOperand,
'=': (firstOperand,secondOperand)=>secondOperand,
}
// Operators Function
functionhandleOperator(e){
const{ displayVal, firstOperand, operator }=calculator;
// saving the parsed value of display screen into input Val constant
constinputVal=parseFloat(displayVal);
// if we already have an operator and we are waiting for second operand then we set the state of operator in state to the operator which was clicked at last. (if a person clicks 21 +-* simultaneously then * is taken for calculation)
if(operator&&calculator.waitingForSecondOperand){
calculator.operator=e.currentTarget.value;
return;
}
// if we dont have an operand then we set it to the displayValue which we saved earlier in inputVal
if(firstOperand===null){
calculator.firstOperand=inputVal;
}elseif(operator){
// otherwise we perform the calculation by calling the Calculation Object with arguments firstOperand which we saved earlier and inputVal which was currently displayed on screen after we saved previous operand
constresult=perfornCalculation[operator](firstOperand,inputVal);
// update the result on the display screen and saving the result as firstOperand
calculator.displayVal=`${Number.isInteger(result) ? result : parseFloat(result).toFixed(2)}`;
calculator.firstOperand=parseFloat(result);
}
// setting the waitingForSecondOperand flag to true as we have firstOperand which was the result of earlier calculation
calculator.waitingForSecondOperand=true;
// update operator value to the current operator clicked
calculator.operator=e.currentTarget.value;
updateDisplay();
}
// All Clear Function
functionclearAll(){
calculator.displayVal='0';
calculator.operator=null;
calculator.firstOperand=null;
calculator.waitingForSecondOperand=false;
updateDisplay();
}
// Clear Function
functionclearEntry(){
// taking the display screen value and splitting it into an array
constnumArr=calculator.displayVal.split('');
// removing the last element from the array
numArr.pop();
letnumberAfterClearingLastEntry=numArr.join('');
// Updating display screen and first operand(parsed) value to the result after popping the last element and joining the array together.
calculator.displayVal=numberAfterClearingLastEntry;
calculator.firstOperand=parseFloat(numberAfterClearingLastEntry);
updateDisplay();
}
// decimal function
functiondecimalInput(e){
// we check if we already have a decimal in display value in state object, if its not true then we append it to the display value
if(!calculator.displayVal.includes(e.currentTarget.value)){
calculator.displayVal+=e.currentTarget.value;
updateDisplay();
}
}
// Event Listeners
numbers.forEach(number=>{
number.addEventListener('click',displayNum);
});
operators.forEach(operator=>{
operator.addEventListener('click',handleOperator)
})
decimal.addEventListener('click',decimalInput);
allClear.addEventListener('click',clearAll);
clear.addEventListener('click',clearEntry);