Axios-getriebene Zaubertratsel

Einführung

In diesem Projekt lernst du, wie du mit Axios Anfragen mit Autorisierungsheadern sendest und wie du die DOM basierend auf den Antwortdaten aktualisierst. Du wirst eine einfache Webanwendung erstellen, die mit einem Server interagiert, um Teile eines mysteriösen Beschwörungszaubers zu erhalten.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Projekt einrichtest und den initialen Code bekommst
• Wie du die Funktionalität für die Schaltfläche "Schlüssel 1" implementierst
• Wie du die Funktionalität für die Schaltfläche "Schlüssel 2" implementierst
• Wie du überprüft, ob die Schatztruhe geöffnet werden kann, basierend auf den erhaltenen Beschwörungszauberteilen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Axios verwenden, um HTTP-Anfragen mit benutzerdefinierten Headern zu machen
• Die DOM manipulieren, um dynamischen Inhalt anzuzeigen
• bedingende Logik implementieren, um spezifische Bedingungen zu überprüfen
• Schritt-für-Schritt-Anweisungen befolgen, um ein Webanwendungsprojekt abzuschließen

Projektstruktur einrichten

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

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

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

Darin:

• index.html ist die Hauptseite.
• css ist der Ordner zum Speichern der Projektstile.
• lib ist der Ordner zum Speichern der JavaScript-Abhängigkeiten des Projekts.
• js/index.js ist die JavaScript-Datei, in der du den Code ergänzen musst.

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, um die Seite zu sehen.

Schaltfläche Schlüssel 1 implementieren

In diesem Schritt wirst du die Funktionalität für die Schaltfläche "Schlüssel 1" implementieren.

1. Öffne in der Datei js/index.js den Block key1Button.addEventListener("click", async () => {... }).

2. Ändere let { data } = await axios.get("/spellone"); in folgenden Code:

   let { data } = await axios.get("/spellone", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });
   

   Diese Codezeilen senden einen GET-Anfrage an den Endpunkt /spellone mit dem Authorization-Header, der auf das bereitgestellte Token gesetzt ist. Die Antwortdaten werden im Element spell1 angezeigt.

3. Speichere die Datei js/index.js.

Schaltfläche Schlüssel 2 implementieren

In diesem Schritt wirst du die Funktionalität für die Schaltfläche "Schlüssel 2" implementieren.

1. Öffne in der Datei js/index.js den Block key2Button.addEventListener("click", async () => {... }).

2. Ändere let { data } = await axios.get("/spelltwo"); in folgenden Code:

   let { data } = await axios.get("/spelltwo", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });
   

   Diese Codezeilen senden einen GET-Anfrage an den Endpunkt /spelltwo mit dem Authorization-Header, der auf das bereitgestellte Token gesetzt ist. Die Antwortdaten werden im Element spell2 angezeigt.

3. Speichere die Datei js/index.js.

Schatzkästchen prüfen

In diesem Schritt wirst du die Logik implementieren, um zu überprüfen, ob die Schatztruhe geöffnet werden kann.

1. Öffne in der Datei js/index.js die Funktion tryOpenTreasureBox().
2. Diese Funktion überprüft, ob der Inhalt der Elemente spell1 und spell2 den erwarteten Werten ("Ich liebe dich" und "Du liebst mich auch") entspricht. Wenn die Bedingungen erfüllt sind, wird der Klassennamen "opened" zum Element treasureBox hinzugefügt und die Erfolgsmeldung angezeigt.
3. Speichere die Datei js/index.js.

Anwendung testen

1. Gehe zurück zum Browser und aktualisiere die Seite.
2. Klicke auf die Schaltflächen "Schlüssel 1" und "Schlüssel 2" und beobachte die Änderungen auf der Seite.
3. Wenn die Schatztruhe erfolgreich geöffnet wird, wirst du die Erfolgsmeldung angezeigt sehen. Die abgeschlossene Wirkung ist wie folgt:

Herzlichen Glückwunsch! Du hast das Projekt "Geheime Verzauberung" abgeschlossen. Du hast gelernt, wie man mit Axios Anfragen mit Autorisierungsheadern sendet und wie man das DOM basierend auf den Antwortdaten aktualisiert.

Zusammenfassung

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