Créer une échelle d'humeur interactive Bing Dwen Dwen

Introduction

Dans ce projet, vous allez apprendre à créer une échelle d'humeur Bing Dwen Dwen, qui est un moyen amusant et interactif d'exprimer votre niveau de satisfaction avec les Jeux olympiques 2022. La mascotte Bing Dwen Dwen est devenue une véritable vague mondiale, et ce projet vous permet d'interagir avec elle et de noter votre satisfaction globale.

👀 Aperçu

Démonstration de l'échelle d'humeur Bing Dwen Dwen

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment initialiser l'échelle d'humeur Bing Dwen Dwen avec l'état d'humeur initial défini sur "mécontent"
Comment mettre à jour l'humeur de Bing Dwen Dwen en fonction de la position de la barre de progression, reflétant différents niveaux de satisfaction

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Manipuler le DOM (Document Object Model) pour changer l'apparence d'un élément HTML en fonction de l'entrée de l'utilisateur
Utiliser des gestionnaires d'événements JavaScript pour répondre aux interactions de l'utilisateur
Appliquer des classes CSS à un élément pour changer son apparence visuelle

Configure la structure du projet

Dans cette étape, vous allez configurer la structure du projet et préparer les fichiers et dossiers nécessaires.

Ouvrez le dossier du projet dans votre éditeur de code. La structure du répertoire est la suivante :

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

Où :

index.html est la page principale.
css est le dossier pour stocker les styles de la page.
js/index.js est le fichier JavaScript dans lequel vous devez ajouter le code.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement, et vous verrez la page.

Initialisez l'échelle d'humeur Bing Dwen Dwen

Dans cette étape, vous allez apprendre à initialiser l'échelle d'humeur Bing Dwen Dwen et à définir l'état d'humeur initial.

Ouvrez le fichier js/index.js.
Localisez le code suivant :

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

Ajoutez le code suivant pour définir l'état d'humeur initial de Bing Dwen Dwen sur "mécontent" :

BingDwenDwen.className = "BingDwenDwen not-satisfied";

Cela définira le nom de classe initial de l'élément Bing Dwen Dwen sur not-satisfied, qui correspond à l'état d'humeur "mécontent".

Mettez à jour l'humeur de Bing Dwen Dwen en fonction de la barre de progression

Dans cette étape, vous allez apprendre à mettre à jour l'humeur de Bing Dwen Dwen en fonction de la position de la barre de progression.

Localisez le code suivant dans le fichier js/index.js :

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

Ajoutez le code suivant à l'intérieur du gestionnaire d'événements onchange pour mettre à jour l'humeur de Bing Dwen Dwen en fonction de la valeur de la barre de progression :

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";
}

Ce code vérifie la valeur de la barre de progression et met à jour le nom de classe de l'élément Bing Dwen Dwen en conséquence. Les noms de classe correspondent aux différents états d'humeur tels que spécifiés dans la description du défi.

Enregistrez le fichier et rafraîchissez le navigateur pour voir le code mis à jour en action.

Maintenant, lorsque vous faites glisser la barre de progression, l'image de Bing Dwen Dwen devrait changer pour refléter l'état d'humeur correspondant. L'effet terminé est le suivant :