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á.
Jak psát:
Pokyny
- 1
Do výběru míst pod nadpis přidejte prázdný
divs idmista. Když se zvolí představení, vykreslete do něj po řadách 40 míst: pro každé tlačítko (button) se třídoumistoa s jeho názvem, od A1 po E8. - 2
Místa, která jsou v
obsazenozvoleného představení, dostanou tříduobsazenea budou vypnutá (disabled). - 3
V
style.cssrozložte#mistado mřížky s 8 sloupci a obsazeným místům dejte vlastní vzhled, třeba šedé pozadí.