Bing Dwen Dwen Mood Scale

Introduction

In this project, you will learn how to create a Bing Dwen Dwen Mood Scale, which is a fun and interactive way to express your satisfaction level with the 2022 Olympic Games. The Bing Dwen Dwen mascot has become a global sensation, and this project allows you to interact with it and rate your overall satisfaction.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to initialize the Bing Dwen Dwen Mood Scale with the initial mood state set to "dissatisfied"
• How to update the Bing Dwen Dwen mood based on the position of the progress bar, reflecting different levels of satisfaction

🏆 Achievements

After completing this project, you will be able to:

• Manipulate the DOM (Document Object Model) to change the appearance of an HTML element based on user input
• Use JavaScript event handlers to respond to user interactions
• Apply CSS classes to an element to change its visual appearance

Skills Graph

Set Up the Project Structure

In this step, you will set up the project structure and prepare the necessary files and folders.

Open the project folder in your code editor. The directory structure is as follows:

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

Where:

• index.html is the main page.
• css is the folder for storing the page styles.
• js/index.js is the JavaScript file where you need to add the code.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Initialize the Bing Dwen Dwen Mood Scale

In this step, you will learn how to initialize the Bing Dwen Dwen Mood Scale and set the initial mood state.

1. Open the js/index.js file.
2. Locate the following code:

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

3. Add the following code to set the initial mood state of Bing Dwen Dwen to "dissatisfied":

BingDwenDwen.className = "BingDwenDwen not-satisfied";

This will set the initial class name of the Bing Dwen Dwen element to not-satisfied, which corresponds to the "dissatisfied" mood state.

Update the Bing Dwen Dwen Mood Based on the Progress Bar

In this step, you will learn how to update the Bing Dwen Dwen mood based on the position of the progress bar.

1. Locate the following code in the js/index.js file:

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

2. Add the following code inside the onchange event handler to update the Bing Dwen Dwen mood based on the progress bar value:

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

This code checks the value of the progress bar and updates the class name of the Bing Dwen Dwen element accordingly. The class names correspond to the different mood states as specified in the challenge description.

3. Save the file and refresh the browser to see the updated code in action.

Now, when you drag the progress bar, the Bing Dwen Dwen image should change to reflect the corresponding mood state. The completed effect is as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.