Erstelle eine interaktive Bing Dwen Dwen Stimmungs-Skala

Einführung

In diesem Projekt lernst du, wie du eine Bing Dwen Dwen Stimmungs-Skala erstellst, was eine interessante und interaktive Möglichkeit ist, um dein Zufriedenheitsniveau mit den Olympischen Spielen 2022 auszudrücken. Das Bing Dwen Dwen Maskottchen ist weltweit zu einem Sensation geworden, und dieses Projekt ermöglicht es dir, mit ihm zu interagieren und deine Gesamtzufriedenheit zu bewerten.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Bing Dwen Dwen Stimmungs-Skala initialisierst, wobei der Anfangszustand auf "unzufrieden" gesetzt ist
Wie du die Stimmung von Bing Dwen Dwen basierend auf der Position der Fortschrittsbalken aktualisierst, was verschiedene Zufriedenheitsgrade widerspiegelt

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Das DOM (Document Object Model) zu manipulieren, um das Aussehen eines HTML-Elements basierend auf Benutzereingaben zu ändern
JavaScript-Ereignishandler zu verwenden, um auf Benutzereingaben zu reagieren
CSS-Klassen auf ein Element anzuwenden, um dessen visuelles Aussehen zu ändern

Projektstruktur einrichten

In diesem Schritt wirst du die Projektstruktur einrichten und die erforderlichen Dateien und Ordner vorbereiten.

Öffne den Projektordner in deinem Code-Editor. Die Verzeichnisstruktur sieht wie folgt aus:

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

Dabei gilt:

index.html ist die Hauptseite.
css ist der Ordner zum Speichern der Seitenstyles.
js/index.js ist die JavaScript-Datei, in der du den Code hinzufügen 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, und du wirst die Seite sehen.

Bing Dwen Dwen Stimmungs-Skala initialisieren

In diesem Schritt wirst du lernen, wie du die Bing Dwen Dwen Stimmungs-Skala initialisierst und den Anfangszustand der Stimmung setzt.

Öffne die Datei js/index.js.
Lasse dir folgenden Code auffinden:

const range = document.getElementById("range");
const BingDwenDwen = document.querySelector(".BingDwenDwen");

Füge folgenden Code hinzu, um den Anfangszustand der Stimmung von Bing Dwen Dwen auf "unzufrieden" zu setzen:

BingDwenDwen.className = "BingDwenDwen not-satisfied";

Dadurch wird der Anfangs-Klassenname des Bing Dwen Dwen-Elements auf not-satisfied gesetzt, was dem Zustand "unzufrieden" entspricht.

Bing Dwen Dwen Stimmung basierend auf dem Fortschrittsbalken aktualisieren

In diesem Schritt wirst du lernen, wie du die Bing Dwen Dwen Stimmung basierend auf der Position des Fortschrittsbalkens aktualisierst.

Lasse dir folgenden Code in der Datei js/index.js auffinden:

range.onchange = (e) => {
  let value = Number(e.target.value); // value
  // TODO
};

Füge folgenden Code innerhalb des onchange-Ereignishandlers hinzu, um die Bing Dwen Dwen Stimmung basierend auf dem Wert des Fortschrittsbalkens zu aktualisieren:

if (value == 25) {
  BingDwenDwen.className = "BingDwenDwen a-little-unsatisfied";
} else if (value == 50) {
  BingDwenDwen.className = "BingDwenDwen ordinary";
} else if (value == 75) {
  BingDwenDwen.className = "BingDwenDwen satisfied";
} else if (value == 100) {
  BingDwenDwen.className = "BingDwenDwen great";
} else {
  BingDwenDwen.className = "BingDwenDwen not-satisfied";
}

Dieser Code prüft den Wert des Fortschrittsbalkens und aktualisiert den Klassennamen des Bing Dwen Dwen-Elements entsprechend. Die Klassennamen entsprechen den verschiedenen Stimmungszuständen, wie in der Herausforderungsbeschreibung angegeben.

Speichere die Datei und aktualisiere den Browser, um den aktualisierten Code in Aktion zu sehen.

Jetzt, wenn du den Fortschrittsbalken ziehst, sollte das Bing Dwen Dwen-Bild sich ändern, um den entsprechenden Stimmungszustand zu widerspiegeln. Die fertige Wirkung ist wie folgt: