Přidávání výdajů

Čas na další projekt! Tento miniprojekt využije formuláře, vypočítané hodnoty a sledování z minulých lekcí a k tomu všechno, co jste se naučili před nimi. Stejně jako v minulém miniprojektu pokyny říkají, co má aplikace dělat, a jak to napíšete, je na vás.

Projekt. Stavíte rozpočet na jeden měsíc. Zapisujete do něj každý výdaj: za co byl, kolik stál a do jaké patří kategorie, jestli jídlo, doprava, nebo zábava. Aplikace výdaje sečte, ukáže, kolik zbývá z měsíčního rozpočtu 8000 Kč a kolik šlo na kterou kategorii, a všechno si pamatuje v prohlížeči. Ve třech cvičeních budete přidávat výdaje do seznamu, potom spočítáte součty a nakonec měsíc uložíte.

Aplikace. Formulář v App.vue je hotový: textové pole #popis, textové pole pro čísla #castka, rozbalovací seznam #kategorie s hodnotami jídlo, doprava a zábava a tlačítko Přidat. Pod formulářem je prázdný seznam #vydaje. Ve skriptu je jen řádek s import, zbytek je na vás.

Úkol. Když se formulář odešle, stránka se nesmí znovu načíst. Výdaje mějte v poli v refu a každý nový přidejte do seznamu jako položku, která ukazuje, za co byl, částku a kategorii, třeba Oběd: 150 Kč (jídlo). Pak obě textová pole vyprázdněte, kategorie může zůstat, jak je. Nejdřív ale zkontrolujte, co je ve formuláři:

• Když je textové pole #popis prázdné (mezery na začátku a na konci se nepočítají), ukažte Napište, za co jste platili.
• Když je částka prázdná, 0 nebo menší, ukažte Zadejte částku větší než 0.

Zprávu ukažte v odstavci s třídou chyba. Dokud je něco špatně, nic nepřidávejte, a jakmile se výdaj přidá, zpráva zmizí.

Tip: každý výdaj potřebuje id pro :key. Date.now() vrátí počet milisekund od začátku roku 1970, který je při každém kliknutí na Přidat jiný, a tak se hodí jako id: { id: Date.now(), … }. A s v-model.number je částka číslo, nebo "", když je textové pole prázdné.