You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.9 KiB
HTML
69 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>Calculator</title>
|
|
</head>
|
|
|
|
<body class="h-screen w-screen flex items-center justify-center">
|
|
<div class="w-2/5 flex flex-col p-10 border rounded-lg">
|
|
<!-- Header -->
|
|
<div class="h-10 my-5 flex items-center justify-center">
|
|
<h1 class="text-xl font-bold">JS Calculator</h1>
|
|
</div>
|
|
|
|
<!-- Calculator wrapper -->
|
|
<div class="w-full flex flex-col justify-center gap-4 mb-10">
|
|
<!-- Inputs and operation buttons -->
|
|
<div class="w-full flex flex-row gap-4">
|
|
<div class="flex flex-col gap-4 w-3/5">
|
|
<input id="firstNum" type="number" placeholder="First Number"
|
|
class="w-full p-2 border rounded-lg h-10" />
|
|
<input id="secondNum" type="number" placeholder="Second Number"
|
|
class="w-full p-2 border rounded-lg h-10" />
|
|
</div>
|
|
<div class="flex flex-col gap-4 w-2/5">
|
|
<button id="add" value="addition" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
|
disabled>+</button>
|
|
<button id="sub" value="subtraction" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
|
disabled>-</button>
|
|
<button id="mult" value="multiplication" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
|
disabled>*</button>
|
|
<button id="div" value="division" class="w-full h-10 border rounded-lg disabled:cursor-not-allowed"
|
|
disabled>÷</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memory buttons -->
|
|
<div class="flex items-center justify-center gap-4">
|
|
<button id="memStore" class="w-12 h-10 border rounded-lg">M+</button>
|
|
<button id="memRecall" class="w-12 h-10 border rounded-lg">MR</button>
|
|
<button id="memClear" class="w-12 h-10 border rounded-lg">MC</button>
|
|
</div>
|
|
|
|
<!-- Result -->
|
|
<div class="flex items-center justify-start">
|
|
<h3 id="result">Result: </h3>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mb-10" />
|
|
|
|
<!-- History -->
|
|
<div class="flex flex-col">
|
|
<h3 class="font-semibold">History</h3>
|
|
<ul id="historyList" class="pl-5 pr-2 max-h-24 overflow-y-auto list-disc mt-2"></ul>
|
|
<button id="clear" class="w-28 h-10 mt-4 border rounded-lg disabled:cursor-not-allowed" disabled>
|
|
Clear History
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="index.js"></script>
|
|
</body>
|
|
|
|
</html>
|