Lekce 8 - Jednoduchá kalkulačka ve Vue

V minulé lekci, Dokončení kalkulačky ve Vue, jsme dokončili kalkulačku.

V této lekci VueJS tutoriálu se zaměříme na jednoduchou kalkulačku, která je založená na HTML select tagu. V rámci Vue.js kurzu jsme si již dříve ukázali, jak lze s pomocí této knihovny vytvořit poměrně složitou a vybavenou kalkulačku. Nyní si ukážeme, jak můžeme takový úkol, pokud nám jednoduchá verze dostačuje, zpracovat velmi snadno a rychle.

Jednoduchá kalkulačka ve Vue

Nejprve si vytvoříme novou složku a v ní soubor SimpleCalculator.vue. Zároveň si hned můžeme definovat funkční část kódu kalkulačky, která bude velmi podobná té minulé:

<script>
export default {
    name: 'Calculator',
    data() {
        return {
            firstValue: 0,
            secondValue: 0,
            operation: 'add',
            result: 0,
        }
    }
}
</script>

Definujeme si proměnné pro dvě čísla, firstValue a secondValue. Obě na začátku nastavíme na nulu. Poté definujeme operaci, kterou nastavíme na "add" (sčítat). Následně definujeme výsledek result, který bude mít také na začátku hodnotu nula. Poté si vytvoříme HTML strukturu:

<template>

<div class="calculator">
<input v-model="firstValue" />
<input v-model="secondValue" />

        <label for="operations">Vyber operaci:</label>

        <select name="operations" id="operations" v-model="operation">
            <option value="add">Sčítat</option>
            <option value="subtract">Odčítat</option>
            <option value="multiply">Násobit</option>
            <option value="divide">Dělit</option>
        </select>

        <button @click="calculate()" class="calculate">Spočítat</button>

        <h2>{{ result }}</h2>
    </div>

</template>

Nejdůležitější částí jsou zde dva inputy, který má každý v-model. To je vlastnost tagů ve Vue, která propojí obsah pole s nějakou proměnnou uvnitř data(). Tím pádem cokoliv, co napíšeme do prvního inputu, bude automaticky uloženo do firstValue.

Poté máme label pro výběr operace a samotný list operací, mezi kterým si můžeme zvolit. Znovu tu uvidíme v-model, kterým propojíme volbu k proměnné operation. Každé <option> definujeme i value, což bude značit, čím volba naplní proměnnou ve v-modelu.

Následně vytvoříme tlačítko, které na kliknutí funkci calculate zavolá pomocí @click (také můžeme použít v-on:click). Nakonec dáme do nadpisu proměnnou result pomocí syntaxe {{ }}.

Nyní si můžeme zkusit napsat funkci calculate:

<script>
export default {
    name: 'Calculator',
    data() {
        return {
            firstValue: 0,
            secondValue: 0,
            operation: 'add',
            result: 0,
        }
    },
    methods: {
        calculate() {
            this.firstValue = parseFloat(this.firstValue)
            this.secondValue = parseFloat(this.secondValue)

            switch (this.operation) {
                case 'add':
                    this.result = this.firstValue + this.secondValue
                    break

                case 'subtract':
                    this.result = this.firstValue - this.secondValue
                    break

                case 'multiply':
                    this.result = this.firstValue * this.secondValue
                    break

                case 'divide':
                    this.result = this.firstValue / this.secondValue
                    break
            }

            this.result = Number(this.result.toFixed(4))
        },
    },
}
</script>

Funkce převede první a druhou hodnotu z typu string na float, abychom s ní mohli počítat bez konverzí JavaScriptu, které by mohly věci pokazit.

Následným jednoduchým switchem rozhodneme, jakým způsobem výsledek vypočítáme na základě hodnoty proměnné this.operation. Slovíčko ´this´ musíme použít vždy, když chceme referovat na hodnotu, která je definovaná v data(). Následně si do this.result vložíme výsledek operace. Nakonec zformátujeme this.result pomocí toFixed(), abychom měli výsledek uvedený na maximálně čtyři desetinná místa.

Pozor, v bloku switch bychom u každého case měli uvést i break, abychom předešli nechtěnému chování a ušetřili výkon.

A světě <div> se , máme prakticky hotovo! Samozřejmě bychom měli aplikaci nakonec i nějak nastylovat:

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

:root {
    --dark: #1a1c20;
    --light: #f6f6f6;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 1.4rem;
    border-radius: 20px;
}

.calculator {
    margin: auto;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--light);
    width: 20vw;
    height: 60vh;
    padding: 4% 10%;
    box-shadow: 0px 0px 8px lightgrey;
}

button,
input,
select {
    border: 3px solid var(--dark);
    padding: 0.5rem;
    outline: none;
    transition: 0.2s;
}

button:hover {
    color: var(--light);
    background-color: var(--dark);
}

h2 {
    padding-top: 2rem;
    font-size: 2.5rem;
}
</style>

V další lekci, Databázový klient ve Vue - Příprava projektu, započneme práci na databázovém klientovi ve Vue.