-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
36 lines (36 loc) · 2.48 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Calc</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="">
<div class="flex justify-center items-center w-screen h-screen bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-3xl">
<div class="w-[400px] h-[700px] grid grid-cols-4 grid-rows-7 gap-1 bg-black rounded-2xl overflow-hidden p-1 shadow-2xl">
<div class="flex p-2 pb-6 text-5xl font-semibold bg-black col-span-4 row-span-3 justify-end items-end">
<span id="inputted" class="flex flex-wrap text-white break-normal">0</span>
</div>
<button data-button-clear-all class="bg-gray-100 col-span-2 rounded-tl-xl font-bold">AC</button>
<button data-button-clear class="bg-gray-100 font-bold">C</button>
<button data-input-value="*" data-button class="bg-orange-500 font-bold text-white rounded-tr-xl">*</button>
<button data-input-value="1" data-button class="bg-gray-100 font-bold">1</button>
<button data-input-value="2" data-button class="bg-gray-100 font-bold">2</button>
<button data-input-value="3" data-button class="bg-gray-100 font-bold">3</button>
<button data-input-value="/" data-button class="bg-orange-500 font-bold text-white">/</button>
<button data-input-value="4" data-button class="bg-gray-100 font-bold">4</button>
<button data-input-value="5" data-button class="bg-gray-100 font-bold">5</button>
<button data-input-value="6" data-button class="bg-gray-100 font-bold">6</button>
<button data-input-value="-" data-button class="bg-orange-500 font-bold text-white">-</button>
<button data-input-value="7" data-button class="bg-gray-100 font-bold">7</button>
<button data-input-value="8" data-button class="bg-gray-100 font-bold">8</button>
<button data-input-value="9" data-button class="bg-gray-100 font-bold">9</button>
<button data-input-value="+" data-button class="bg-orange-500 font-bold text-white">+</button>
<button data-input-value="0" data-button class="bg-gray-100 col-span-2 font-bold rounded-bl-xl">0</button>
<button data-input-value="." data-button class="bg-gray-100 font-bold">.</button>
<button data-button-calc class="bg-orange-500 font-bold text-white rounded-br-xl">=</button>
</div>
</div>
<script src="calc.js"></script>
</body>
</html>