Aplicação Simples de Sorteio de Prêmios

Introdução

Neste projeto, você aprenderá como criar uma aplicação simples de sorteio de prêmios usando JavaScript e jQuery. A aplicação simulará um sorteio de prêmios, rotacionando uma lista de prêmios e exibindo o prêmio vencedor quando a rotação parar.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar os arquivos e diretórios do projeto
• Como implementar a função rolling para lidar com a rotação dos prêmios e exibir o prêmio vencedor
• Como testar o projeto para garantir que ele funcione como esperado

🏆 Conquistas

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

• Usar JavaScript e jQuery para criar aplicações web interativas
• Implementar um loop de animação simples usando requestAnimationFrame
• Lidar com interações do usuário e atualizar a interface do usuário (UI) de acordo

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

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.

Implementar a Função de Rotação

Nesta etapa, você implementará a função rolling em index.js usando jQuery ou JavaScript. Siga os passos abaixo para concluir esta etapa:

1. Encontre a função rolling em index.js.
2. Refine a função rolling para atender aos seguintes requisitos:
   • Ao clicar no botão iniciar, o elemento class de li1 é o ponto de partida, e o fundo amarelo (classe .active) é rotacionado no sentido horário sobre os prêmios.
   • Quando a rotação parar, a dica do prêmio é exibida no id como o elemento award da página. A dica do prêmio deve conter o nome do prêmio, que deve ser exatamente o mesmo nome no título.
   • O intervalo de rotação e as condições de parada da rotação são fornecidos.

Defina uma variável num no mesmo nível da função rolling e defina o valor padrão como -1. Defina num e o código específico dentro da função rolling da seguinte forma:

// ...

// TODO: Por favor, complete esta função
let num = -1; // Índice do elemento onde está localizado após a rotação

function rolling() {
  time++; // Revoluções mais 1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // Executar animação recursiva
  }, speed);
  num++; // Índice mais 1
  if (num > 8) {
    // Se o índice for maior que 7, reinicie para 0, pois há 8 prêmios
    num = 1;
  }
  // Adicionar a classe ativa ao li vencedor
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // Se o número de rotações for maior que o número total de rotações, a rotação é interrompida e o temporizador é limpo
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "index");
    console.log($(".li" + num).text());
    // Mostrar informações do prêmio
    $("#award").text(`Parabéns pelo seu prêmio ${$(".li" + num).text()}!!!`);
    time = 0;
    num = -1;
    return;
  }
}

Testar o Projeto

Nesta etapa, você testará o projeto para garantir que ele funcione conforme o esperado. Siga os passos abaixo para concluir esta etapa:

1. Salve as alterações no arquivo js/index.js.
2. Atualize a página no seu navegador.
3. Clique no botão "Iniciar" para iniciar o sorteio do prêmio.
4. Observe a rotação do prêmio e a exibição da dica do prêmio quando a rotação parar.
5. Repita os passos 3-4 algumas vezes para garantir que o projeto esteja funcionando corretamente.

O resultado final é o seguinte:

Parabéns! Você concluiu o projeto Sorteio de Prêmios. Se tiver alguma dúvida ou encontrar algum problema, não hesite em perguntar.

Resumo

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