Zadání 1 – Historie vstupů

Vytvoř jednoduchou aplikaci, která eviduje poslední zadaný text a jeho historii. Uživatel zadá text do vstupního pole a potvrdí jej tlačítkem Přidat. Aplikace uloží text jako aktuální hodnotu a zároveň jej připojí do historie (např. jako řetězec oddělený znakem |). Tlačítkem Odebrat poslední se odstraní poslední záznam z historie. Tlačítkem Vymazat zleva se odstraní první záznam v historii. Tlačítkem Vyčistit vše se smaže aktuální hodnota i historie. Zobrazuj aktuální stav, historii a hlášky, pokud je akce nemožná (prázdná historie, prázdný vstup apod.).

Cíl úlohy

• Procvičit deklaraci a inicializaci proměnných (let/const) a práci se stavem aplikace.

• Oddělit „aktuální hodnotu“ a „historii“ jako dvě reprezentace stavu.

• Provádět operace nad stavem (přidání, odebrání zleva/zprava, vymazání) bez použití pole.

• Použít podmínky if / else pro validaci vstupu a ošetření hraničních stavů.

• Rozdělit řešení do funkcí (aktualizace výpisu, přidání, mazání) a využít funkce s parametrem.

• Propojit UI a skriptovou logiku pomocí událostí onclick.

Vstupní podmínky

• Vytvoř soubory index.html, style.css, main.js.

Požadovaný výstup

• Vstupní pole pro text.

• Tlačítka: Přidat, Odebrat poslední, Vymazat zleva, Vyčistit vše.

• Výpis aktuální hodnoty a výpis historie (jako text).

• Jednoduché chybové/informační hlášení (paragraf).

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

Doplňující pokyny

• Použij sémantické prvky main, section, h1, h2, p.

• ID a třídy pojmenuj srozumitelně.

• Žádné čistě vizuální efekty bez smyslu.

Historie vstupů

Řešení úlohy 1 – Historie vstupů

Co je zde splněno

Použití proměnných pro uchování aktuální hodnoty a historie jako dvou samostatných částí stavu aplikace.

Práce s řetězcem jako reprezentací historie, včetně operací přidání, odebrání zprava a odebrání zleva.

Validace vstupu a ošetření hraničních stavů (prázdný vstup, prázdná historie) pomocí podmíněných příkazů.

Obsluha uživatelských akcí prostřednictvím kliknutí na tlačítka a zobrazení informačních hlášek.

Přehledná práce s DOM pomocí základních metod bez použití pokročilých technik.

Poznámky

Úlohu lze snadno rozšířit o omezení maximální délky historie nebo o automatické nastavení aktuální hodnoty po odebrání položky z historie.

V navazující úloze je možné převést historii z řetězce na pole a porovnat oba přístupy z hlediska přehlednosti a práce s daty.

Zadání 2 – Editor příkazů

Rozšiř předchozí aplikaci tak, aby uživatel mohl zadávat příkazy, které mění stav aplikace. Uživatel zadá text do vstupu a zvolí typ akce (např. Přidat, Mazat zprava, Mazat zleva, Vyčistit). Po potvrzení aplikace provede odpovídající operaci nad stavem a vypíše jasnou zpětnou vazbu. Chování aplikace se liší podle zvoleného režimu a podle aktuálního stavu (např. nelze mazat z prázdné historie). Rozhodovací logika musí být přehledná a musí kombinovat více podmínek.

Cíl úlohy

• Procvičit řízení toku programu pomocí rozhodovacích struktur (if / else if / switch).

• Využít logické operátory (&&, ||) pro ošetření složitějších vstupních scénářů.

• Použít switch pro výběr typu operace a default pro neplatný režim.

• Zajistit striktní porovnávání hodnot při rozhodování (např. ===).

• Vytvořit funkce s parametrem pro zobecnění operací nad stavem a použít return pro zpracování výsledku.

• Rozšířit validaci o více typů chybových stavů a diferencovanou zpětnou vazbu.

Vstupní podmínky

• Navazuje na řešení úlohy Historie vstupů.

• Struktura HTML a základní stylování jsou k dispozici.

Požadovaný výstup

• Vstupní pole pro text.

• Volba režimu (např. select nebo skupina tlačítek): ADD, DEL_RIGHT, DEL_LEFT, CLEAR.

• Tlačítko Provést akci.

• Výpis aktuální hodnoty a historie (textově).

• Zřetelné hlášky pro různé situace: prázdný vstup, prázdná historie, neznámá akce apod.

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

Doplňující pokyny

• Použij sémantické prvky main, section, h1, h2, p.

• Kód strukturovat do funkcí: zpracování akce, aktualizace výpisu, validace.

• Žádné čistě vizuální efekty bez smysluplné vazby na logiku.

Editor příkazů

Řešení úlohy 2 – Editor příkazů

Co je zde splněno

Použití rozhodovacích struktur pro řízení toku programu, kombinace if, else if a switch pro přehledné větvení logiky.

Využití logických operátorů && a || pro složitější validační scénáře (např. text je povinný pouze pro ADD, mazání je zakázáno při prázdné historii).

Použití striktního porovnávání === při rozhodování o režimech a stavech.

Zpracování akcí centralizované do funkce zpracujAkci(rezim, text), která vrací výsledek pomocí return a poskytuje jednoznačnou zpětnou vazbu.

Podpora více chybových stavů a diferencovaných hlášek (prázdný vstup, prázdná historie, neznámá akce).

Práce s historií pouze pomocí řetězce a operací indexOf, lastIndexOf a slice.

Propojení UI a logiky přes událost kliknutí na tlačítko „Provést akci“ a aktualizace výpisu stavu pomocí samostatné funkce.

Poznámky

Řešení lze rozšířit o „suchý režim“ (náhled), který pouze oznámí, co by se změnilo, ale stav neupraví.

V navazující úloze je možné porovnat stejné chování při uložení historie do pole a ukázat rozdíl v implementaci mazání zleva/zprava.

Pokud by bylo požadováno uchování stavu po obnovení stránky, lze doplnit localStorage (mimo rozsah tohoto cvičení).