Nákupní seznam

Vítejte v poslední lekci kurzu JavaScriptu! V ní dáte dohromady všechno, co jste se naučili, a postavíte malou aplikaci: nákupní seznam. Napíšete, co chcete koupit a kolik to stojí, kliknete na tlačítko a položka se objeví v seznamu. Aplikace sečte ceny, zkontroluje, co jste zadali, a umožní vám odškrtnout, co už máte koupené.

Využijete proměnné, podmínky, pole, cykly, funkce, objekty i všechno o webových stránkách z minulé lekce. Každé cvičení navazuje tam, kde to předchozí skončilo (editor začíná jeho hotovým kódem), a přidává jeden kousek. Na konci budete mít celou aplikaci, kterou jste krok za krokem postavili.

Stránka. Stránka v index.html je hotová, takže budete psát jen script.js. Váš skript bude pracovat s těmito prvky (uvádíme jejich id):

• seznam: seznam položek (ul), zatím prázdný,
• celkem: kolik nákup stojí. Je to span, prvek pro kousek textu uvnitř odstavce,
• nazev a cena: textová pole (políčka) pro to, co koupit a kolik to stojí (políčko pro cenu má type="number", protože je určené pro čísla),
• pridat: tlačítko, které položku přidá do seznamu,
• zprava: odstavec pro zprávy, třeba když zapomenete zadat cenu.

V prvku style na začátku stránky je také styl pro třídu koupeno, který položku přeškrtne. Tuto třídu budete potřebovat později. Na začátku script.js jsme už prvky našli pomocí document.querySelector() a uložili do konstant, takže můžete rovnou začít.

Plán. Nákupní seznam bude uložený v poli objektů, jeden objekt pro každou položku, například { nazev: "Mléko", cena: 25 }. Toto pole obsahuje data aplikace. Stránka data jen zobrazuje: funkce zobrazPolozky() vymaže seznam na stránce a pro každou položku v poli vytvoří prvek li. Kdykoli se data změní, třeba když přidáte položku, skript změní pole a znovu zavolá zobrazPolozky(). Je to stejná myšlenka jako u počítadla v minulé lekci: hodnota žije v proměnné a stránka ji zobrazuje.

Pro připomenutí, jak vytvořit prvek a vložit ho do stránky:

const li = document.createElement("li");
li.textContent = "Mléko";
seznam.append(li);