Coding-Challenge: Kontaktformular für einen Online-Shop

Wir erstellen nun ein etwas ungewöhnliches Kontaktformular für einen Online-Shop.

Wie funktioniert diese Challenge?

1. Diese Coding-Challenge besteht aus 5 verschiedenen Aufgaben.
2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. Überschrift einfügen

Deine Aufgabe: Erstelle eine h1-Überschrift mit einem beliebigen Text für dein Kontaktformular (Beispieltext: "Reise nach Gliese")

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

Wir starten in Zeile 1 mit einer h1-Überschrift:

<h1>Deine Reise nach Gliese 1214 b</h1>

[/lp_spoiler]

2. Text

Deine Aufgabe: Erstelle zwei Texte mit dem p-Element und zwei beliebigen Inhalten.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

Jetzt fügen wir etwas Text in Zeile 3 hinzu:

<p> Auf dieser Seite kannst du deinen Flug zum Ozeanplaneten Gliese 1214 b buchen</p>
<p>Hinweis: Die Entfernung beträgt derzeit 50 Lichtjahre (ca. 475 Billionen Kilometer) von der Erde. Es ist also mit heutiger Technik ausgeschlossen, dort zu Lebzeiten anzukommen.</p>

[/lp_spoiler]

3. Formular

Deine Aufgabe: Erstelle ein leeres Formular.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
Dann erstellen wir ein Formular in Zeile 6:

<form>

</form>

[/lp_spoiler]

4. Formulareingabe Zahl 

Deine Aufgabe: Erstelle im Formular einen Text und ein Eingabe-Element für Zahlen (Tipp: input-Element und type="number")
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
IN dieses Formular aus Schritt 3 fügen wir einen Text mit Eingabemöglichkeit für Zahlen hinzu:

<p>
Wieviel Kilogramm Gepäck :<br>
<input type="number"> <label>KG</label>
</p>

[/lp_spoiler]

5. Formulareingabe Datum

Deine Aufgabe: Erstelle im Formular einen Text und ein Eingabe-Element für ein Datum (Tipp: type="date")
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
Unter der Zahleneingabe fügen wir eine Eingabemöglichkeit für ein Datum hinzu.

<p>
<label>Bitte trage dein gewünschtes Abflugdatum ein:</label>
<input type="date">
</p>

[/lp_spoiler]
Fertig! Damit konntest du ein statisches HTML-Kontaktformular erstellen!

Mit JavaScript kann man dann später dieses Formular auch abschicken, und die Reise tatsächlich buchen 😉