Escala de Humor do Bing Dwen Dwen

Introdução

Neste projeto, você aprenderá como criar uma Escala de Humor do Bing Dwen Dwen, que é uma maneira divertida e interativa de expressar seu nível de satisfação com os Jogos Olímpicos de 2022. O mascote Bing Dwen Dwen se tornou uma sensação global, e este projeto permite que você interaja com ele e avalie sua satisfação geral.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como inicializar a Escala de Humor do Bing Dwen Dwen com o estado de humor inicial definido como "insatisfeito"
• Como atualizar o humor do Bing Dwen Dwen com base na posição da barra de progresso, refletindo diferentes níveis de satisfação

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Manipular o DOM (Document Object Model) para alterar a aparência de um elemento HTML com base na entrada do usuário
• Usar manipuladores de eventos JavaScript para responder às interações do usuário
• Aplicar classes CSS a um elemento para alterar sua aparência visual

Configurar a Estrutura do Projeto

Nesta etapa, você configurará a estrutura do projeto e preparará os arquivos e pastas necessários.

Abra a pasta do projeto no seu editor de código. A estrutura do diretório é a seguinte:

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

Onde:

• index.html é a página principal.
• css é a pasta para armazenar os estilos da página.
• js/index.js é o arquivo JavaScript onde você precisa adicionar o código.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Inicializar a Escala de Humor do Bing Dwen Dwen

Nesta etapa, você aprenderá como inicializar a Escala de Humor do Bing Dwen Dwen e definir o estado de humor inicial.

1. Abra o arquivo js/index.js.
2. Localize o seguinte código:

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

3. Adicione o seguinte código para definir o estado de humor inicial do Bing Dwen Dwen como "insatisfeito":

BingDwenDwen.className = "BingDwenDwen not-satisfied";

Isso definirá o nome da classe inicial do elemento Bing Dwen Dwen como not-satisfied, que corresponde ao estado de humor "insatisfeito".

Atualizar o Humor do Bing Dwen Dwen com Base na Barra de Progresso

Nesta etapa, você aprenderá como atualizar o humor do Bing Dwen Dwen com base na posição da barra de progresso.

1. Localize o seguinte código no arquivo js/index.js:

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

2. Adicione o seguinte código dentro do manipulador de eventos onchange para atualizar o humor do Bing Dwen Dwen com base no valor da barra de progresso:

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 o valor da barra de progresso e atualiza o nome da classe do elemento Bing Dwen Dwen de acordo. Os nomes das classes correspondem aos diferentes estados de humor, conforme especificado na descrição do desafio.

3. Salve o arquivo e atualize o navegador para ver o código atualizado em ação.

Agora, quando você arrastar a barra de progresso, a imagem do Bing Dwen Dwen deverá mudar para refletir o estado de humor correspondente. O efeito concluído é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.