Das Buchungsformular

Der Besucher hat seine Plätze gewählt. Jetzt bucht er sie: Er gibt seinen Namen und seine E-Mail-Adresse ein, und das Kino hält die Plätze für ihn frei. Bezahlt wird an der Kinokasse, wie die Seite sagt. Füge der Platzwahl unter #zusammenfassung ein Formular hinzu:

<form id="buchungsformular" novalidate>
    <p>
        <label for="name">Name</label>
        <input id="name">
        <span id="name-fehler" class="fehler"></span>
    </p>
    <p>
        <label for="email">E-Mail</label>
        <input id="email" type="email">
        <span id="email-fehler" class="fehler"></span>
    </p>
    <p id="plaetze-fehler" class="fehler"></p>
    <button type="submit">Buchen</button>
</form>
<p id="bestaetigung"></p>

Wie im Checkpoint Registrierungsformular sagt novalidate dem Browser, die E-Mail-Adresse nicht selbst zu prüfen, weil dein Skript die Prüfung übernimmt. Und gib in style.css .fehler eine rote Farbe. Die Plätze gehören nicht ins Formular, und das ist wichtig: Ein button in einem Formular schickt das Formular ab, wenn man ihn anklickt.

Die Prüfungen kennst du aus der Lektion Ereignisse und Formulare: Verhindere, dass die Seite neu lädt, schneide die Felder mit trim() zu und zeige jedes Problem neben seinem Feld an, alle auf einmal. Eine Prüfung ist neu: Eine Buchung ohne Plätze ergibt keinen Sinn.

Die Buchung. Wenn alles stimmt, halte die Buchung in einem Array, buchungen, als Objekt mit der id der Vorstellung, dem Namen, der E-Mail-Adresse und den Plätzen, zum Beispiel:

{ vorstellungId: 1, name: "Anna", email: "anna@example.com", plaetze: ["C6", "C7"] }

Ab dann sind die gebuchten Plätze belegt. Ein Platz ist belegt, wenn er im belegt der Vorstellung steht oder in den Plätzen einer Buchung für dieselbe Vorstellung. Diese Funktion sagt es dir, mit some():

function istBelegt(platz) {
    if (gewaehlteVorstellung.belegt.includes(platz)) {
        return true;
    }
    return buchungen.some((buchung) => buchung.vorstellungId === gewaehlteVorstellung.id && buchung.plaetze.includes(platz));
}

Verwende sie in zeigePlaetze() statt gewaehlteVorstellung.belegt.includes(platz).