Skip to content

Commit b691506

Browse files
nirajxdevnirajxdev
committed
initial commit
1 parent 1c3bde1 commit b691506

File tree

2 files changed

+53
-3
lines changed

2 files changed

+53
-3
lines changed

‎04_calculator/index.html‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,49 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Calculator</title>
6+
<title>Minimal Calculator</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
</head>
9-
<body>
10-
9+
<body class="bg-gray-100 text-gray-900 font-sans antialiased flex items-center justify-center min-h-screen">
10+
11+
<div id="main" class="w-full max-w-xs bg-white shadow-xl border border-gray-300 rounded-lg overflow-hidden">
12+
13+
<div id="display"
14+
class="bg-gray-900 text-white h-28 p-6 flex flex-col items-end justify-end text-right relative">
15+
16+
<!-- <div id="history" class="text-gray-400 text-base font-mono absolute top-2 right-4"></div> -->
17+
18+
<div id="current-value" class="text-6xl font-mono font-light truncate">0</div>
19+
</div>
20+
21+
<div id="keypad" class="grid grid-cols-4 gap-px bg-gray-300">
22+
23+
<button class="key-btn text-black bg-gray-200 hover:bg-gray-300 active:bg-gray-400 py-4 text-xl font-medium" data-type="clear">AC</button>
24+
<button class="key-btn text-black bg-gray-200 hover:bg-gray-300 active:bg-gray-400 py-4 text-xl font-medium" data-type="utility">+/-</button>
25+
<button class="key-btn text-black bg-gray-200 hover:bg-gray-300 active:bg-gray-400 py-4 text-xl font-medium" data-type="operator">%</button>
26+
<button class="key-btn text-white bg-black hover:bg-gray-700 active:bg-gray-900 py-4 text-xl font-medium" data-type="operator" data-op="/">/</button>
27+
28+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">7</button>
29+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">8</button>
30+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">9</button>
31+
<button class="key-btn text-white bg-black hover:bg-gray-700 active:bg-gray-900 py-4 text-xl font-medium" data-type="operator" data-op="*">*</button>
32+
33+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">4</button>
34+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">5</button>
35+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">6</button>
36+
<button class="key-btn text-white bg-black hover:bg-gray-700 active:bg-gray-900 py-4 text-xl font-medium" data-type="operator" data-op="-">-</button>
37+
38+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">1</button>
39+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">2</button>
40+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="number">3</button>
41+
<button class="key-btn text-white bg-black hover:bg-gray-700 active:bg-gray-900 py-4 text-xl font-medium" data-type="operator" data-op="+">+</button>
42+
43+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium col-span-2" data-type="number">0</button>
44+
<button class="key-btn text-gray-900 bg-white hover:bg-gray-100 py-4 text-xl font-medium" data-type="decimal">.</button>
45+
<button class="key-btn text-white bg-black hover:bg-gray-700 active:bg-gray-900 py-4 text-xl font-medium" data-type="calculate" data-op="=">=</button>
46+
</div>
47+
</div>
48+
1149
<script src="script.js"></script>
1250
</body>
1351
</html>

‎04_calculator/script.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const displayEl = document.getElementById("display");
2+
const currentValueEl = document.getElementById("current-value");
3+
const buttonEl = document.querySelectorAll("button");
4+
5+
const clear = document.querySelector('[data-type = "clear"]');
6+
const utility = document.querySelector('[data-type="utility"]');
7+
const operator = document.querySelectorAll('[data-type="operator"]');
8+
const number = document.querySelectorAll('[data-type="number"]');
9+
const decimal = document.querySelector('[data-type="decimal"]');
10+
const calculate = document.querySelector('[data-type = "calculate"]');
11+
12+

0 commit comments

Comments
 (0)