BananaMaster

9 - Input ( date, color ) in JavaScript ( style.background )

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

Task 1.

Erstelle ein input mit type="number" und einen Button. Beim Klick auf den Button wird die vom Benutzer eingegebene Zahl, erhöht um 5, ausgegeben.

Task 2.

Erstelle zwei input mit type="number". Beim Klick auf den Button wird ihre Differenz ausgegeben (erste minus zweite).

Task 3.

Erstelle ein input mit type="date" und einen Button. Beim Klick auf den Button wird das gewählte Datum ausgegeben.

Task 4.

Erstelle ein input mit type="date", einen Button und eine leere Liste <ul> mit der Klasse .out-4. Der Benutzer wählt ein Datum im input. Beim Klick auf den Button wird eine Funktion ausgeführt, die ein neues Tag <li> mit dem gewählten Datum erstellt und zur Liste hinzufügt. Verwende String-Verkettung ('<li>' + ...) und Kurzschreibweise. Wichtig: Jeder neue Klick fügt ein neues Element zur Liste hinzu.

Task 5.

Erstelle ein input mit type="color" und einen Button. Beim Klick auf den Button wird die gewählte Farbe als Text in einem div ausgegeben. Die Ausgabe sieht etwa wie #0f0f0f aus (kann je nach Browser variieren, aber solange etwas ausgegeben wird — hast du alles richtig gemacht).

Task 6.

Erstelle ein input mit type="color" und einen Button. Beim Klick auf den Button ändert sich sein Hintergrund zu der im Eingabefeld gewählten Farbe. Verwende dafür ( style.background = )

Task 7.

Erstelle ein input mit type="color" und einen Button. Beim Klick auf den Button ändert sich die Textfarbe zu der im Eingabefeld gewählten Farbe. Verwende dafür ( style.color = ). Beachte: Wir haben background durch color ersetzt, um die Textfarbe des Buttons zu ändern, nicht seinen Hintergrund.

Task 8.

Erstelle ein input mit type="color", ein Tag <h1> mit dem Text "Hello" und einen Button. Beim Klick auf den Button ändere die Hintergrundfarbe des Textes im h1 zu der im Eingabefeld gewählten Farbe. Verwende dafür ( style.background = )

Task 9.

Erstelle drei input mit type="number" und einen Button. Beim Klick auf den Button wird in der Konsole der arithmetische Mittelwert der drei Zahlen ausgegeben. Formel: ( inp1 + inp2 + inp3 ) / 3