Skip to content

Commit 7048827

Browse files
sensasi-delightsensasi-delight
committed
chore: restructure folder
1 parent db770e0 commit 7048827

File tree

13 files changed

+300
-300
lines changed

13 files changed

+300
-300
lines changed

3-ios-calculator-clone/index.html renamed to 4-ios-calculator-clone/index.html

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,80 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>IOS Calculator Clone</title>
9-
10-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
11-
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
12-
13-
<style>
14-
button {
15-
width: 50px;
16-
height: 50px;
17-
margin-top: 4px;
18-
padding: 0 !important;
19-
font-size: 1.5em !important;
20-
}
21-
</style>
22-
</head>
23-
24-
<body class="bg-black">
25-
26-
<div class="container d-flex justify-content-center align-items-center vh-100">
27-
28-
<div class="grid">
29-
30-
<div>
31-
<p id="display" class="text-light text-end" style="font-size: 3em;">0</p>
32-
</div>
33-
34-
35-
<div>
36-
<button class="btn btn-lg btn-light rounded-circle" onclick="handleClearButton()">C</button>
37-
<button class="btn btn-lg btn-light rounded-circle" onclick="handleInverseButton()">+/-</button>
38-
<button class="btn btn-lg btn-light rounded-circle" onclick="handlePercentButton()">%</button>
39-
<button class="operator btn btn-lg btn-warning rounded-circle">&divide;</button>
40-
</div>
41-
42-
<div>
43-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(7)">7</button>
44-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(8)">8</button>
45-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(9)">9</button>
46-
<button class="operator btn btn-lg btn-warning rounded-circle">&times;</button>
47-
</div>
48-
<div>
49-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(4)">4</button>
50-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(5)">5</button>
51-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(6)">6</button>
52-
<button class="operator btn btn-lg btn-warning rounded-circle">&minus;</button>
53-
</div>
54-
55-
<div>
56-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(1)">1</button>
57-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(2)">2</button>
58-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(3)">3</button>
59-
<button class="operator btn btn-lg btn-warning rounded-circle">&plus;</button>
60-
</div>
61-
62-
<div>
63-
<button class="btn btn-lg btn-dark rounded-pill" style="width: 104px;" onclick="handleNumberButton(0)">0</button>
64-
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton('.')">.</button>
65-
<button class="btn btn-lg btn-warning rounded-circle" onclick="handleEqualButton()">&equals;</button>
66-
</div>
67-
68-
</div>
69-
70-
</div>
71-
72-
73-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
74-
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
75-
crossorigin="anonymous"></script>
76-
77-
<script src="main.js"></script>
78-
</body>
79-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>IOS Calculator Clone</title>
9+
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
12+
13+
<style>
14+
button {
15+
width: 50px;
16+
height: 50px;
17+
margin-top: 4px;
18+
padding: 0 !important;
19+
font-size: 1.5em !important;
20+
}
21+
</style>
22+
</head>
23+
24+
<body class="bg-black">
25+
26+
<div class="container d-flex justify-content-center align-items-center vh-100">
27+
28+
<div class="grid">
29+
30+
<div>
31+
<p id="display" class="text-light text-end" style="font-size: 3em;">0</p>
32+
</div>
33+
34+
35+
<div>
36+
<button class="btn btn-lg btn-light rounded-circle" onclick="handleClearButton()">C</button>
37+
<button class="btn btn-lg btn-light rounded-circle" onclick="handleInverseButton()">+/-</button>
38+
<button class="btn btn-lg btn-light rounded-circle" onclick="handlePercentButton()">%</button>
39+
<button class="operator btn btn-lg btn-warning rounded-circle">&divide;</button>
40+
</div>
41+
42+
<div>
43+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(7)">7</button>
44+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(8)">8</button>
45+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(9)">9</button>
46+
<button class="operator btn btn-lg btn-warning rounded-circle">&times;</button>
47+
</div>
48+
<div>
49+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(4)">4</button>
50+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(5)">5</button>
51+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(6)">6</button>
52+
<button class="operator btn btn-lg btn-warning rounded-circle">&minus;</button>
53+
</div>
54+
55+
<div>
56+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(1)">1</button>
57+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(2)">2</button>
58+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton(3)">3</button>
59+
<button class="operator btn btn-lg btn-warning rounded-circle">&plus;</button>
60+
</div>
61+
62+
<div>
63+
<button class="btn btn-lg btn-dark rounded-pill" style="width: 104px;" onclick="handleNumberButton(0)">0</button>
64+
<button class="btn btn-lg btn-dark rounded-circle" onclick="handleNumberButton('.')">.</button>
65+
<button class="btn btn-lg btn-warning rounded-circle" onclick="handleEqualButton()">&equals;</button>
66+
</div>
67+
68+
</div>
69+
70+
</div>
71+
72+
73+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
74+
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
75+
crossorigin="anonymous"></script>
76+
77+
<script src="main.js"></script>
78+
</body>
79+
8080
</html>

3-ios-calculator-clone/main.js renamed to 4-ios-calculator-clone/main.js

Lines changed: 95 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,96 @@
1-
2-
const display = document.getElementById('display');
3-
let operand1 = null;
4-
let operand2 = null;
5-
6-
let lastActivedButton = null;
7-
8-
function unactiveButton() {
9-
const activatedButton = document.querySelector('.operator.btn-light');
10-
11-
if (activatedButton) {
12-
activatedButton.classList.remove('btn-light');
13-
activatedButton.classList.add('btn-warning');
14-
}
15-
}
16-
17-
function activateButton(buttonDOM) {
18-
unactiveButton();
19-
20-
if (display.innerText !== "0") {
21-
buttonDOM.classList.add('btn-light');
22-
buttonDOM.classList.remove('btn-warning');
23-
24-
operand1 = display.innerText;
25-
}
26-
}
27-
28-
29-
document.querySelectorAll('.operator').forEach(elDOM => {
30-
elDOM.onclick = () => {
31-
if (operand1) {
32-
handleEqualButton();
33-
}
34-
activateButton(elDOM)
35-
}
36-
});
37-
38-
function handleNumberButton(param) {
39-
const activatedButton = document.querySelector('.operator.btn-light');
40-
41-
if (activatedButton) {
42-
lastActivedButton = activatedButton.innerText;
43-
unactiveButton();
44-
}
45-
46-
if ((display.innerText === "0" && param != '.') || (display.innerText == operand1 && activatedButton)) {
47-
display.innerText = param;
48-
} else {
49-
display.innerText = display.innerText + param;
50-
}
51-
}
52-
53-
function handleClearButton() {
54-
display.innerText = 0;
55-
operand1 = null;
56-
operand2 = null;
57-
unactiveButton();
58-
}
59-
60-
function handleInverseButton() {
61-
display.innerText = display.innerText * -1
62-
}
63-
64-
function handlePercentButton() {
65-
display.innerText = display.innerText / 100
66-
}
67-
68-
function handleEqualButton() {
69-
70-
unactiveButton();
71-
operand2 = display.innerHTML;
72-
73-
let result;
74-
75-
76-
switch (lastActivedButton) {
77-
case "×":
78-
result = operand1 * operand2
79-
break;
80-
81-
case "÷":
82-
result = operand1 / operand2
83-
break;
84-
85-
case "−":
86-
result = operand1 - operand2
87-
break;
88-
89-
case "+":
90-
result = parseInt(operand1) + parseInt(operand2)
91-
break;
92-
93-
}
94-
95-
display.innerHTML = result;
1+
2+
const display = document.getElementById('display');
3+
let operand1 = null;
4+
let operand2 = null;
5+
6+
let lastActivedButton = null;
7+
8+
function unactiveButton() {
9+
const activatedButton = document.querySelector('.operator.btn-light');
10+
11+
if (activatedButton) {
12+
activatedButton.classList.remove('btn-light');
13+
activatedButton.classList.add('btn-warning');
14+
}
15+
}
16+
17+
function activateButton(buttonDOM) {
18+
unactiveButton();
19+
20+
if (display.innerText !== "0") {
21+
buttonDOM.classList.add('btn-light');
22+
buttonDOM.classList.remove('btn-warning');
23+
24+
operand1 = display.innerText;
25+
}
26+
}
27+
28+
29+
document.querySelectorAll('.operator').forEach(elDOM => {
30+
elDOM.onclick = () => {
31+
if (operand1) {
32+
handleEqualButton();
33+
}
34+
activateButton(elDOM)
35+
}
36+
});
37+
38+
function handleNumberButton(param) {
39+
const activatedButton = document.querySelector('.operator.btn-light');
40+
41+
if (activatedButton) {
42+
lastActivedButton = activatedButton.innerText;
43+
unactiveButton();
44+
}
45+
46+
if ((display.innerText === "0" && param != '.') || (display.innerText == operand1 && activatedButton)) {
47+
display.innerText = param;
48+
} else {
49+
display.innerText = display.innerText + param;
50+
}
51+
}
52+
53+
function handleClearButton() {
54+
display.innerText = 0;
55+
operand1 = null;
56+
operand2 = null;
57+
unactiveButton();
58+
}
59+
60+
function handleInverseButton() {
61+
display.innerText = display.innerText * -1
62+
}
63+
64+
function handlePercentButton() {
65+
display.innerText = display.innerText / 100
66+
}
67+
68+
function handleEqualButton() {
69+
70+
unactiveButton();
71+
operand2 = display.innerHTML;
72+
73+
let result;
74+
75+
76+
switch (lastActivedButton) {
77+
case "×":
78+
result = operand1 * operand2
79+
break;
80+
81+
case "÷":
82+
result = operand1 / operand2
83+
break;
84+
85+
case "−":
86+
result = operand1 - operand2
87+
break;
88+
89+
case "+":
90+
result = parseInt(operand1) + parseInt(operand2)
91+
break;
92+
93+
}
94+
95+
display.innerHTML = result;
9696
}

0 commit comments

Comments
 (0)