Místa v sále

Pro jednoduchost mají oba sály Kina Hvězda stejně míst: pět řad, A až E, a v každé řadě osm míst. Ve výběru míst bude každé místo tlačítko se svou řadou a číslem: A1, A2 a tak dál až po E8.

Skript vytvoří tlačítka ve dvou cyklech, jednom uvnitř druhého, jako v lekci Cykly. Vnější cyklus prochází řady a pro každou řadu projde vnitřní cyklus čísla od 1 do 8:

const rady = ["A", "B", "C", "D", "E"];
const mistVRade = 8;

for (const rada of rady) {
    for (let cislo = 1; cislo <= mistVRade; cislo++) {
        const misto = `${rada}${cislo}`;
        // Tady vytvořte tlačítko místa...
    }
}

V misto je postupně "A1", "A2" a tak dál až po "E8".

Napište funkci zobrazMista(), která vykreslí místa zvoleného představení do prázdného div s id mista; ten přidejte do výběru míst pod nadpis. Funkce musí vědět, které představení je zvolené, a další cvičení to budou potřebovat taky. Proto si ho zvolPredstaveni() uloží do proměnné zvolenePredstaveni (na začátku null), než zavolá zobrazMista().

Místa, která jsou v obsazeno představení, už jsou prodaná. Dostanou třídu obsazene a nesmí na ně jít kliknout: nastavte jim disabled na true, jako tlačítku v lekci Časovače a čekání. Jestli je místo v obsazeno, zjistíte pomocí includes().

Vzhled. Čtyřicet tlačítek za sebou by se zalamovalo jako slova v odstavci. Rozložte je do mřížky s osmi sloupci, jako v lekci CSS Grid kurzu CSS: repeat(8, 1fr) dá osm stejně širokých sloupců.

Typické chyby:

  • Na začátku zobrazMista() zapomenete vyprázdnit #mista. Zvolíte jiné představení a jeho místa se přidají za ta stará.

Pokyny

  1. Do výběru míst pod nadpis přidejte prázdný div s id mista. Když se zvolí představení, vykreslete do něj po řadách 40 míst: pro každé tlačítko (button) se třídou misto a s jeho názvem, od A1 po E8.

  2. Místa, která jsou v obsazeno zvoleného představení, dostanou třídu obsazene a budou vypnutá (disabled).

  3. V style.css rozložte #mista do mřížky s 8 sloupci a obsazeným místům dejte vlastní vzhled, třeba šedé pozadí.