Úloha 3 – Dynamické prvky na stránce (tvorba a mazání seznamu)

Úloha

Zadání (kontext úlohy):

Vytvoř jednoduchou aplikaci, kde může uživatel přidávat nové položky do seznamu pomocí tlačítka „Přidat položku“. Každá nová položka se zobrazí jako řádek v seznamu. Po kliknutí na tlačítko „Vymazat poslední“ se odstraní poslední přidaná položka.

Cíl úlohy:

Procvičit si práci s metodami DOM – createElement(), appendChild() a removeChild(). Naučit se programově přidávat i mazat prvky na stránce.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
JavaScript je vložen do <script> na konci stránky.
Položky se generují automaticky s číslováním („Položka 1“, „Položka 2“, …).

Požadovaný výstup:

• Na stránce bude:

  • nadpis „Dynamický seznam“,

  • prázdný <ul> element,

  • dvě tlačítka: „Přidat položku“ a „Vymazat poslední“.

• Po kliknutí na „Přidat položku“ se do seznamu přidá nová položka (<li>) s postupným číslem.

• Po kliknutí na „Vymazat poslední“ se smaže poslední prvek seznamu.

• Pokud už v seznamu žádné položky nejsou, mazací tlačítko zobrazí upozornění „Seznam je prázdný.“

Doplňující pokyny:

• Použij document.createElement() pro vytvoření nového <li>.

• Přidej nový prvek pomocí appendChild().

• Při mazání použij removeChild() na rodičovský element.

• Zkontroluj délku seznamu pomocí childElementCount.

• Číslování uchovávej v proměnné, kterou při každém přidání zvýšíš.