Zufälliger Grußkarten-Generator

Einführung

In diesem Projekt lernst du, wie du eine Weihnachtsgrußkarte erstellst, die zufällige Grüße anzeigt, wenn der Knopf "Schreiben" angeklickt wird. Dieses Projekt hilft dir zu verstehen, wie du mit JavaScript-Funktionen, Ereignislistehern und DOM-Manipulation umgehen kannst.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Projektumgebung einrichtest
• Wie du eine Funktion implementierst, um zufällig einen Gruß aus einem vorgegebenen Array auszuwählen
• Wie du eine Funktion implementierst, um den ausgewählten Gruß in der Grußkarte anzuzeigen
• Wie du einen Ereignislistener zum Knopf "Schreiben" hinzufügst, um das Anzeigen des Grußes auszulösen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Mit JavaScript-Funktionen zufälligen Inhalt zu generieren
• Den DOM manipulieren, um den Inhalt eines HTML-Elements zu aktualisieren
• Ereignislistener hinzufügen, um bestimmte Aktionen auszulösen
• Mit einer vorgegebenen Projektstruktur umzugehen und Schritt-für-Schritt-Anweisungen zu befolgen

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur sieht wie folgt aus:

├── index.css
├── index.html
└── index.js

Dabei gilt:

• index.css ist die Styledatei für diese Herausforderung.
• index.js ist die JavaScript-Datei, die für diese Herausforderung abgeschlossen werden muss.
• index.html ist die Grußkartenseite.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Implementiere die writeGreeting()-Funktion

In diesem Schritt wirst du die writeGreeting()-Funktion implementieren, um zufällig einen Gruß aus dem bereitgestellten greetings-Array auszuwählen.

1. Öffne die index.js-Datei.
2. Lasse die writeGreeting()-Funktion aufspüren und ersetze den // TODO-Kommentar durch folgenden Code:

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

Dieser Code generiert einen zufälligen Index innerhalb des greetings-Arrays und gibt den entsprechenden Gruß zurück.

Implementiere die show()-Funktion

In diesem Schritt wirst du die show()-Funktion implementieren, um den Gruß im greetingDisplay-Element anzuzeigen.

1. Öffne die index.js-Datei.
2. Lasse die show()-Funktion aufspüren und ersetze den // TODO-Kommentar durch folgenden Code:

greetingDisplay.innerHTML = writeGreeting();

Dieser Code ruft die writeGreeting()-Funktion auf, um einen zufälligen Gruß zu erhalten, und setzt dann den innerHTML des greetingDisplay-Elements, um den Gruß anzuzeigen.

3. Speichere die index.js-Datei.
4. Aktualisiere die Ansicht "Web 8080" in der VM, um die Grußkarte in Aktion zu sehen. Klicke auf den Knopf "Schreiben", um einen zufälligen Gruß anzuzeigen.

Herzlichen Glückwunsch! Du hast das Weihnachtsgrußkarten-Projekt abgeschlossen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.