-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCalculator.html
126 lines (124 loc) · 3.48 KB
/
Calculator.html
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
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="Calculator.css">
<style>*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #ecf0f3;
font-family: sans-serif;
outline: none;
}
.container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator{
background-color:pink;
padding: 15px;
border-radius: 30px;
box-shadow: inset 5px 5px 12px #ffffff,
5px 5px 12px rgba(0,0,0,.16);
display: grid;
grid-template-columns: repeat(4,68px);
}
input{
grid-column: span 4;
height: 70px;
width: 260px;
background-color: #ecf0f3;
box-shadow: inset -5px -5px 12px #ffffff,
inset 5px 5px 12px rgba(0,0,0,.16);
border: none;
border-radius: 30px;
color: rgb(70,70,70);
font-size:50px;
text-align: end;
margin: auto;
margin-top:40px;
margin-bottom: 30px;
padding: 20px;
}
button{
height: 48px;
width: 48px;
background-color: #ecf0f3;
box-shadow:-5px -5px 12px #ffffff,
5px 5px 12px rgb(0,0,0,.16);
border: none;
border-radius: 50%;
margin: 8px;
font-size: 16px;
font-weight: 600;
}
.equal{
width: 115px;
border-radius: 40px;
background-color: #ecf0f3;
box-shadow:-5px -5px 12px #ffffff,
5px 5px 12px rgb(0,0,0,.16);
}
.operator{
color: blue;
}</style>
</head>
<body>
<div class="container">
<div class="calculator">
<input type="text" placeholder="0" id="output-screen" class="display">
<button data-value="cl" class="operator">Cl</button>
<button data-value="del" class="operator">DEL</button>
<button data-value="%" class="operator">%</button>
<button data-value="/" class="operator">/</button>
<button data-value="7" >7</button>
<button data-value="8">8</button>
<button data-value="9" >9</button>
<button data-value="*" class="operator">*</button>
<button data-value="4" >4</button>
<button data-value="5">5</button>
<button data-value="6">6</button>
<button data-value="-" class="operator">-</button>
<button data-value="1">1</button>
<button data-value="2">2</button>
<button data-value="3">3</button>
<button data-value="+" class="operator">+</button>
<button data-value="." class="operator">.</button>
<button data-value="0">0</button>
<button data-value="=" class="operator equal">=</button>
</div>
</div>
<script src="Calculator.js"></script>
<script>const display=document.querySelector(".display");
const buttons=document.querySelectorAll("button");
const specialChar=["%","*","/",".", "+","="];
let output="";
//Define function to calculate based on click button
const calculate=(btnValue)=>{
if(btnValue==="=" && btnValue!==""){
//If output has %,replce with /100 before evaluating
output=eval(output.replace("%","/100"));
}else if(btnValue==="cl"){
output=" "
}else if(btnValue==="del"){
//remove last character
output=output.toString().slice(0,-1);
} else{
//if outout is empty and button is last specialcharacter then returns
if(output==="" && specialChar.includes(btnValue)) return;
output+=btnValue;
}
display.value=output;
}
//Add event listener to buttons, call calculate on click
buttons.forEach(button=>{
//Button click listener calls calculate() with dataset value as argument
button.addEventListener("click",e=>{
calculate(e.target.dataset.value);
});
})</script>
</body>
</html>