File size: 2,771 Bytes
864e708 |
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 37 38 39 |
<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Calculator</title></head><body>
<header class="p-4">
<h1 class="text-2xl font-bold">Calculator</h1>
<p class="text-gray-500">Use this calculator to perform basic arithmetic operations.</p>
</header>
<x-data="{ total: 0, newNum: '', selectedOperation: '', previousOperation: '', result: '' }`"></x-data>
<x-cloak>
<main class="px-8">
<div class="flex flex-col">
<form
x-init="function () {
calculateAndUpdateDisplay();
}"
>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-html="display"></button>
<div class="flex flex-wrap">
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '1'">1</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '2'">2</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '3'">3</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '+'">+</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '-'">-</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '*'">*</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="selectedOperation = '/'">/</button>
</div>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="clearAll()">AC</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="clearNewNum()">CE</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="addDecimal()">.</button>
<button class="btn btn-lg bg-gray-300 rounded-lg p-2" x-on:click="calculateAndUpdateDisplay()">=</button>
</form>
</div>
</main>
</x-cloak>
</div>
</body></html> |