crealise
/
calculator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

plain simple

main
pvincent 2 months ago
parent
3932d26942
commit
93099e741f
2 changed files with 13 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      README.md
  2. 88
      index.html

4
README.md
View File

@ -0,0 +1,4 @@
CALCULATOR
==========
TODO: explanation...

88
index.html
View File

@ -1,99 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="//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
}
//TODO: ...
}))
console.log('Ready!')
})
</script>
</head>
<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" 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">
</div>
<div class="grid grid-cols-3 gap-3 mb-4">
<template x-for="x in 3">
<template x-for="y in 3">
<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>
</template>
</template>
<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 @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>
<body class=" flex h-screen justify-center items-start " x-data="calculator">
<div class="m-8 p-8 text-4xl bg-gray-200">
<ul>
<li class="italic"> Effacer-moi </li>
<li> Merci de dessiner une grille de 4 colonnes... </li>
</ul>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save