Die Plätze und das Formular

Der letzte Teil ist die Platzwahl mit dem Buchungsformular. Wähle in der Vorschau eine Vorstellung, um sie zu öffnen.

Die Plätze. Das Skript erzeugt 40 Buttons mit der Klasse platz, und es fügt den verkauften belegt und den vom Besucher gewählten gewaehlt hinzu. Es ist dieselbe Situation wie bei den Tag-Buttons, also dieselbe Lösung: im Layer components das Grundaussehen in .platz und danach die Aussehen der Zustände, die sich dagegen durchsetzen:

.platz {
    @apply rounded-lg border border-stone-300 bg-white py-2 text-sm font-semibold transition-colors enabled:cursor-pointer enabled:hover:border-nacht focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nacht;
}

.belegt {
    @apply cursor-not-allowed bg-stone-200 text-stone-400 line-through;
}

.gewaehlt {
    @apply border-gold bg-gold text-nacht;
}

Die belegten Plätze sind deaktiviert, deshalb behält enabled: die Hand und den Hover-Rahmen für die freien, wie in der Übung Deaktivierte Buttons. Die belegten Plätze sind außerdem durchgestrichen, damit man sie leicht unterscheidet, auch wenn man Farben schlecht sieht. Die Plätze stehen wieder in einem Grid mit 8 Spalten, jetzt mit grid grid-cols-8 gap-2, und max-w-md verhindert, dass sich das Grid über einen breiten Bildschirm ausbreitet.

Das Formular. Preflight hat den Feldern die Rahmen genommen, sie brauchen also ein Aussehen wie in der Übung Formularfelder gestalten und einen Rahmen, wenn sie den Fokus haben. Gib im Formular:

• dem form die Klasse max-w-md und jedem der beiden Absätze mit einem Feld mt-4,
• den Labels block font-semibold: Als Blöcke setzen sie ihre Felder in die nächste Zeile,
• den Feldern mt-1 w-full rounded-lg border border-stone-300 bg-white px-3 py-2 focus:outline-2 focus:outline-gold,
• den drei Fehlermeldungen text-sm text-red-700 anstelle ihrer Klasse fehler,
• dem Button Buchen das Aussehen des Buttons auf der Startseite: seine Klassen mit mt-4 und py-2 statt mt-8 und py-3, ohne inline-block (ein Button ist schon einer) und mit cursor-pointer,
• der Bestätigung mt-4 font-semibold text-green-700.

Deine Tickets. Die Einträge der Liste erzeugt das Skript, wie die Buttons Plätze wählen, sie bekommen ihre Klassen also im Skript: eine Zeile mit eintrag.className in zeigeTickets().