File size: 2,972 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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
// Define the application
const App = {
template: `<div class="flex flex-col h-screen">
<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>
<main class="px-8">
<div class="flex flex-wrap">
<calculator />
</div>
</main>
</div>`,
data() {
return {
display: 0,
newNum: '',
selectedOperation: '',
previousOperation: '',
result: ''
};
},
methods: {
calculateAndUpdateDisplay() {
if (this.selectedOperation === '') return;
if (this.newNum === '') return;
if (this.previousOperation === '+') {
this.result = this.display + parseInt(this.newNum);
} else if (this.previousOperation === '-') {
this.result = this.display - parseInt(this.newNum);
} else if (this.previousOperation === '*') {
this.result = this.display * parseInt(this.newNum);
} else if (this.previousOperation === '/') {
this.result = this.display / parseInt(this.newNum);
}
this.display = this.result;
this.newNum = '';
},
clearAll() {
this.display = 0;
this.newNum = '';
this.selectedOperation = '';
this.previousOperation = '';
this.result = '';
},
clearNewNum() {
this.newNum = '';
},
addDecimal() {
if (this.newNum === '') return;
this.newNum = `${this.newNum}.`;
}
}
};
// Initialize the calculator component
const calculator = Daisy.component({
template: `<div class="flex flex-col">
<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="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>
</div>
</div>`
}); |