| <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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> |