DOM-Segment-2

Wir wollen in dieser Aufgabe die Eingaben eines Formulars verarbeiten.

Aufbau

Wir benötigen eine index.html, eine style.css und eine index.js.

Verbinde die Dateien miteinander wie in der letzten Übung.

Diesmal wirst du auch das CSS Stylesheet brauchen (oder SASS wem das lieb ist).

Formular

Arbeite nun an deinem Formular.

Mit dem Formular kann ein Anwender eine Hotel-Buchungsanfrage senden.

Es gibt folgende Eingabefelder:

  • Name des Hauptbuchenden (Text, Eingabepflichtig)
  • Anzahl der Besucher (Zahl, Eingabepflichtig, Minimum: 1)
  • Anreisetag (Datum, Eingabepflichtig)
  • Abreisetag (Datum, Eingabepflichtig)

Dein Formular braucht noch einen Submit Button

Style

Zentriere dein Formular in der Mitte des Bildschirmes

Benutze dazu die Flexbox.

JavaScript

Deine JavaScript soll die Funktion run() verfügen.

Verknüpfe sie im Formular unter action mit dem Wert javascript:run().

Speichere in der Funktion nun die Eingaben aus den Formularfeldern in einzelnen Konstanten ab.

Test

Schreibe in JavaScript alle Konstanten in der Konsole aus.

Werden die Eingaben des Anwenders in der Konsolenausgabe angezeigt?

Funktioniert das immer noch, wenn du neue Werte eingibst?