Escala de Humor de Bing Dwen Dwen

Introducción

En este proyecto, aprenderás a crear una Escala de Humor de Bing Dwen Dwen, que es una forma divertida e interactiva de expresar tu nivel de satisfacción con los Juegos Olímpicos de 2022. La mascota Bing Dwen Dwen se ha convertido en una sensación global, y este proyecto te permite interactuar con ella y calificar tu satisfacción general.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo inicializar la Escala de Humor de Bing Dwen Dwen con el estado de humor inicial establecido en "insatisfecho"
• Cómo actualizar el humor de Bing Dwen Dwen en función de la posición de la barra de progreso, reflejando diferentes niveles de satisfacción

🏆 Logros

Después de completar este proyecto, podrás:

• Manipular el DOM (Modelo de Objeto de Documento) para cambiar la apariencia de un elemento HTML en función de la entrada del usuario
• Usar controladores de eventos de JavaScript para responder a las interacciones del usuario
• Aplicar clases CSS a un elemento para cambiar su apariencia visual

Skills Graph

Establece la estructura del proyecto

En este paso, establecerás la estructura del proyecto y prepararás los archivos y carpetas necesarios.

Abre la carpeta del proyecto en tu editor de código. La estructura del directorio es la siguiente:

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

Donde:

• index.html es la página principal.
• css es la carpeta para almacenar los estilos de la página.
• js/index.js es el archivo de JavaScript donde debes agregar el código.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Inicializa la Escala de Humor de Bing Dwen Dwen

En este paso, aprenderás a inicializar la Escala de Humor de Bing Dwen Dwen y establecer el estado de humor inicial.

1. Abre el archivo js/index.js.
2. Localiza el siguiente código:

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

3. Agrega el siguiente código para establecer el estado de humor inicial de Bing Dwen Dwen en "insatisfecho":

BingDwenDwen.className = "BingDwenDwen not-satisfied";

Esto establecerá el nombre de clase inicial del elemento Bing Dwen Dwen en not-satisfied, que corresponde al estado de humor "insatisfecho".

Actualiza el Humor de Bing Dwen Dwen en Función de la Barra de Progreso

En este paso, aprenderás a actualizar el humor de Bing Dwen Dwen en función de la posición de la barra de progreso.

1. Localiza el siguiente código en el archivo js/index.js:

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

2. Agrega el siguiente código dentro del controlador de eventos onchange para actualizar el humor de Bing Dwen Dwen en función del valor de la barra de progreso:

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

Este código verifica el valor de la barra de progreso y actualiza el nombre de clase del elemento Bing Dwen Dwen en consecuencia. Los nombres de clase corresponden a los diferentes estados de humor como se especifican en la descripción del desafío.

3. Guarda el archivo y actualiza el navegador para ver el código actualizado en acción.

Ahora, cuando arrastres la barra de progreso, la imagen de Bing Dwen Dwen debería cambiar para reflejar el estado de humor correspondiente. El efecto completado es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.