Zadání 1 – Playlist písniček

Zadání

Vytvoř aplikaci „Playlist“. Uživatel zadá název skladby a délku v sekundách. Po kliknutí na tlačítko Přidat se vytvoří objekt skladby ve tvaru např. { nazev: "...", delka: 123 } a tento objekt se uloží do pole (playlist). Aplikace průběžně vypisuje seznam skladeb.

Tlačítkem Celkový čas se zobrazí součet délek všech skladeb ve formátu mm:ss.
Tlačítkem Souhrn se v alert() zobrazí přehled skladeb (každá na nový řádek) a na konci celkový čas.
Nepovol přidání skladby se stejným názvem (duplicitní název).

Cíl úlohy

• Události kliknutí onclick.

• Objekty: vytvoření objektového literálu a práce s vlastnostmi objektu.

• Pole objektů: přidávání záznamů do kolekce a iterativní zpracování cyklem.

• Validace vstupů: prázdný text, číslo, kladná hodnota, duplicita názvu.

• DOM manipulace: value, innerHTML, readonly.

Vstupní podmínky

Připravené soubory index.html, style.css, main.js.

Požadovaný výstup

• Input pro název, input pro délku v sekundách.

• Tlačítka Přidat, Celkový čas, Souhrn, Reset.

• Výpis položek do <p id="vypis">.

• Povinné české komentáře v JS.

Doplňující pokyny

• Sémanticky jednoduché, čitelné názvy proměnných.

• Nepoužívej šipkové funkce ani ternární operátor.

• Data ukládej jako objekty (např. { nazev, delka }) a ukládej je do pole objektů.

Playlist písniček

Řešení úlohy 1 – Playlist písniček

Co je zde splněno

• Stejné mechaniky jako ve „vozidlech“: validace, sčítání čísel, výpis seznamu, alert souhrn.

• Jiný cíl: práce s časem hudby, ne s hmotností.

• Duplicitní názvy se nepřidají, časy se formátují do mm:ss.

Poznámky

• Na formátování bez „?:“ jsem přidal i explicitní if, aby to odpovídalo začátečnické syntaxi.

• Snadno rozšíříš o odstranění položky podle čísla řádku (další input + kontrola).

Zadání 2 – Rozpočet mini-projektu

Zadání

Vytvoř aplikaci „Rozpočet mini-projektu“. Uživatel zadá:

• název práce (text),

• počet hodin (číslo),

• sazbu za hodinu v Kč (číslo).

Po kliknutí na tlačítko Přidat se vytvoří objekt položky ve tvaru např.
{ nazev: "...", hodiny: 5, sazba: 300 }
a tento objekt se uloží do pole položek. Aplikace průběžně vypisuje seznam položek do stránky.

Tlačítko Celková cena spočte součet všech položek jako hodiny × sazba. Pokud je zaškrtnuto Započíst DPH 21 %, výsledná částka se navýší o DPH. Uživatel může zadat limit rozpočtu; při překročení limitu se zobrazí varování.

Tlačítko Souhrn zobrazí v alert() přehled položek (každá na nový řádek) a na konci celkovou cenu.
Tlačítko Odebrat poslední odstraní poslední přidanou položku z kolekce.
Tlačítko Reset vyčistí vstupy, kolekci i výstupy.

Cíl úlohy

• Události kliknutí onclick.

• Objekty: tvorba objektového literálu a práce s vlastnostmi objektu (polozka.hodiny, polozka.sazba…).

• Pole objektů: opakované ukládání záznamů do kolekce a iterativní zpracování cyklem.

• Validace vstupů: prázdný text, číslo, kladná hodnota, volitelně kontrola duplicity názvu položky.

• Agregace numerických hodnot: výpočet součtu, aplikace DPH, kontrola limitu.

• DOM manipulace: value, innerHTML, readonly.

Vstupní podmínky

Připravené soubory index.html, style.css, main.js.

Požadovaný výstup

• Input: název, hodiny, sazba, limit.

• Checkbox: Započíst DPH 21 %.

• Tlačítka: Přidat, Celková cena, Souhrn, Odebrat poslední, Reset.

• Výpis položek do <div id="seznam">.

• Krátké české komentáře v JS.

Doplňující pokyny

• Jednotky a měna vypisuj česky („Kč“, „hod“).

• Nepoužívej šipkové funkce ani ternární operátor.

• Data ukládej jako objekty v poli objektů.

Rozpočet mini-projektu

Řešení úlohy 2 – Rozpočet mini-projektu