Skip to content

Commit 3b241d5

Browse files
nirajxdevnirajxdev
committed
updated the styling
1 parent b691506 commit 3b241d5

File tree

1 file changed

+33
-34
lines changed

1 file changed

+33
-34
lines changed

‎04_calculator/index.html‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,49 +3,48 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Minimal Calculator</title>
6+
<title>Calculator</title>
77
<script src="https://cdn.tailwindcss.com"></script>
8+
<style>
9+
.btn:active {
10+
filter: brightness(0.9);
11+
}
12+
</style>
813
</head>
9-
<body class="bg-gray-100 text-gray-900 font-sans antialiased flex items-center justify-center min-h-screen">
14+
<body class="flex items-center justify-center min-h-screen bg-gray-900">
1015

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>
16+
<div id="calculator" class="w-80 p-5 bg-gray-800 rounded-xl shadow-2xl">
2017

21-
<div id="keypad" class="grid grid-cols-4 gap-px bg-gray-300">
18+
<div id="display" class="h-16 mb-4 text-right bg-gray-700 p-3 rounded-lg text-white text-4xl font-mono overflow-hidden">0</div>
19+
20+
<div class="grid grid-cols-4 gap-3">
2221

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>
22+
<button class="btn col-span-1 bg-gray-600 hover:bg-gray-500 text-white font-bold py-3 rounded-full text-xl" data-action="clear">AC</button>
23+
<button class="btn col-span-1 bg-gray-600 hover:bg-gray-500 text-white font-bold py-3 rounded-full text-xl" data-action="sign">+/-</button>
24+
<button class="btn col-span-1 bg-gray-600 hover:bg-gray-500 text-white font-bold py-3 rounded-full text-xl" data-action="percent">%</button>
25+
<button class="btn col-span-1 bg-orange-500 hover:bg-orange-400 text-white font-bold py-3 rounded-full text-xl" data-action="operator" data-value="divide">÷</button>
2726

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>
27+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="7">7</button>
28+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="8">8</button>
29+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="9">9</button>
30+
<button class="btn col-span-1 bg-orange-500 hover:bg-orange-400 text-white font-bold py-3 rounded-full text-xl" data-action="operator" data-value="multiply">×</button>
3231

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>
32+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="4">4</button>
33+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="5">5</button>
34+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="6">6</button>
35+
<button class="btn col-span-1 bg-orange-500 hover:bg-orange-400 text-white font-bold py-3 rounded-full text-xl" data-action="operator" data-value="subtract">−</button>
36+
37+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="1">1</button>
38+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="2">2</button>
39+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-value="3">3</button>
40+
<button class="btn col-span-1 bg-orange-500 hover:bg-orange-400 text-white font-bold py-3 rounded-full text-xl" data-action="operator" data-value="add">+</button>
41+
42+
<button class="btn col-span-2 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl text-left pl-6" data-value="0">0</button>
43+
<button class="btn col-span-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-full text-xl" data-action="decimal">.</button>
44+
<button class="btn col-span-1 bg-orange-500 hover:bg-orange-400 text-white font-bold py-3 rounded-full text-xl" data-action="calculate">=</button>
4645
</div>
4746
</div>
4847

49-
<script src="script.js"></script>
48+
<script src="script.js"></script>
5049
</body>
5150
</html>

0 commit comments

Comments
 (0)