Rezervační formulář

Návštěvník má místa vybraná a teď si je zarezervuje: napíše své jméno a e-mail a kino mu místa podrží. Zaplatí v pokladně, jak říká stránka. Do výběru míst pod #souhrn přidejte formulář:

<form id="formular-rezervace" novalidate>
    <p>
        <label for="jmeno">Jméno</label>
        <input id="jmeno">
        <span id="jmeno-chyba" class="chyba"></span>
    </p>
    <p>
        <label for="email">E-mail</label>
        <input id="email" type="email">
        <span id="email-chyba" class="chyba"></span>
    </p>
    <p id="mista-chyba" class="chyba"></p>
    <button type="submit">Rezervovat</button>
</form>
<p id="potvrzeni"></p>

Stejně jako v miniprojektu Registrační formulář říká atribut novalidate prohlížeči, ať e-mail nekontroluje sám, protože kontrolu dělá váš skript. A v style.css dejte třídě .chyba červenou barvu. Místa nejsou ve formuláři, a na tom záleží: tlačítko (button) uvnitř formuláře po kliknutí formulář odešle.

Kontroly znáte z lekce Události a formuláře: zabraňte novému načtení stránky, odstraňte z textových polí mezery na začátku a na konci a každý problém ukažte u jeho pole, všechny najednou. Jedna kontrola je nová: rezervace bez míst nedává smysl.

Rezervace. Když je všechno v pořádku, uložte rezervaci do pole rezervace jako objekt s id představení, jménem, e-mailem a místy, například:

{ idPredstaveni: 1, jmeno: "Anna", email: "anna@example.com", mista: ["C6", "C7"] }

Od té chvíle jsou zarezervovaná místa obsazená. Místo je obsazené, když je v obsazeno představení, nebo v místech některé rezervace na stejné představení. To vám řekne tato funkce s some():

function jeObsazene(misto) {
    if (zvolenePredstaveni.obsazeno.includes(misto)) {
        return true;
    }
    return rezervace.some((polozka) => polozka.idPredstaveni === zvolenePredstaveni.id && polozka.mista.includes(misto));
}

Použijte ji v zobrazMista() místo zvolenePredstaveni.obsazeno.includes(misto).