plain simple

8 months ago · 93099e741f
2 changed files with 13 additions and 79 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,4 @@
 CALCULATOR
 ==========
 TODO: explanation...
--- a/index.html
+++ b/index.html
@ -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>