|
|
|
@ -7,35 +7,90 @@ |
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
<script src="//unpkg.com/alpinejs" defer></script> |
|
|
|
<title>Calculator</title> |
|
|
|
<script> |
|
|
|
document.addEventListener('alpine:init', () => { |
|
|
|
Alpine.data('calculator', () => ({ |
|
|
|
result: 'Ready', |
|
|
|
current: 0, |
|
|
|
previous: 0, |
|
|
|
operator: '=', |
|
|
|
logAll(message = 'LOG') { |
|
|
|
console.log(`${message}: ${this.previous} ${this.operator} ${this.current} => ${this.result}`) |
|
|
|
}, |
|
|
|
pressDigit(key) { |
|
|
|
this.current = this.current * 10 + key |
|
|
|
this.result = this.current |
|
|
|
if (this.operator == '=') { this.previous = 0 } |
|
|
|
this.logAll() |
|
|
|
}, |
|
|
|
pressPlus() { |
|
|
|
this.operator = '+' |
|
|
|
this.compute() |
|
|
|
this.result = this.operator |
|
|
|
this.logAll() |
|
|
|
}, |
|
|
|
pressMinus() { |
|
|
|
this.operator = '-' |
|
|
|
this.compute() |
|
|
|
this.result = this.operator |
|
|
|
this.logAll() |
|
|
|
}, |
|
|
|
pressEqual() { |
|
|
|
this.compute() |
|
|
|
this.operator = '=' |
|
|
|
this.result = `= ${this.previous}` |
|
|
|
this.previous = 0 |
|
|
|
this.logAll() |
|
|
|
}, |
|
|
|
compute() { |
|
|
|
this.logAll('BEFORE') |
|
|
|
switch (this.operator) { |
|
|
|
case '+': |
|
|
|
this.previous = this.previous + this.current |
|
|
|
break; |
|
|
|
case '-': |
|
|
|
this.previous = this.previous - this.current |
|
|
|
break; |
|
|
|
default: |
|
|
|
this.result = this.current |
|
|
|
this.previous = this.current |
|
|
|
} |
|
|
|
this.current = 0 |
|
|
|
} |
|
|
|
|
|
|
|
})) |
|
|
|
console.log('Ready!') |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body class="bg-zinc-400 flex h-screen justify-center items-start " x-data="{}" @keypress="console.log($event)"> |
|
|
|
<body class="bg-zinc-400 flex h-screen justify-center items-start " x-data="calculator"> |
|
|
|
<div id='calculator' class="bg-slate-800 w-screen grid grid-cols-[3fr,1fr] h-screen "> |
|
|
|
<div id="screen" |
|
|
|
<div id="screen" x-text="result" |
|
|
|
class="hover:ring-4 ring-blue-400 my-4 mx-2 p-8 text-right text-[8vh] text-white bg-black col-span-4 row-span-4 h-[20vh] rounded-xl border-double border-4 border-slate-800"> |
|
|
|
RESULT |
|
|
|
</div> |
|
|
|
<div class="grid grid-cols-3 gap-3 mb-4"> |
|
|
|
<template x-for="x in 3"> |
|
|
|
<template x-for="y in 3"> |
|
|
|
<button |
|
|
|
<button @click="pressDigit(x*3+y-3)" |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-800 bg-slate-600 h-full" |
|
|
|
x-text="x*3+y-3"></button> |
|
|
|
x-text="x*3+y-3"> |
|
|
|
</button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<button |
|
|
|
<button @click="pressDigit(0)" |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 col-span-2 bg-slate-600 border-double border-4 border-slate-800 h-full">0</button> |
|
|
|
<button |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 bg-slate-600 border-double border-4 border-slate-800 h-full">.</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="grid grid-rows-4 gap-3 mb-4"> |
|
|
|
<button |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full">-</button> |
|
|
|
<button |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full">+</button> |
|
|
|
<button |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white row-span-2 h-full">=</button> |
|
|
|
<!-- <button @click="pressMinus" |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full">-</button> --> |
|
|
|
<button @click="pressPlus" |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full row-span-2 ">+</button> |
|
|
|
<button @click="pressEqual" |
|
|
|
class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full row-span-2 ">=</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
