Aplicación simple de sorteo de premios

Introducción

En este proyecto, aprenderás a crear una aplicación simple de sorteo de premios utilizando JavaScript y jQuery. La aplicación simulará un sorteo de premios girando una lista de premios y mostrando el premio ganador cuando la rotación se detenga.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar los archivos y directorios del proyecto
• Cómo implementar la función rolling para manejar la rotación de los premios y mostrar el premio ganador
• Cómo probar el proyecto para asegurarse de que funcione como se espera

🏆 Logros

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

• Utilizar JavaScript y jQuery para crear aplicaciones web interactivas
• Implementar un bucle de animación simple utilizando requestAnimationFrame
• Manejar las interacciones del usuario y actualizar la interfaz de usuario en consecuencia

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

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 para ver la página.

Implementar la función de giro

En este paso, implementarás la función rolling en index.js utilizando jQuery o JavaScript. Sigue los pasos siguientes para completar este paso:

1. Encuentra la función rolling en index.js.
2. Refina la función rolling para cumplir con los siguientes requisitos:
   • Cuando haces clic en el botón de inicio, el elemento class de li1 es el punto de partida, y el fondo amarillo (clase .active) se rota en el sentido de las agujas del reloj sobre el premio.
   • Cuando la rotación se detiene, la pista del premio se muestra en el id como el elemento award de la página. La pista del premio debe contener el nombre del premio, que debe ser exactamente el mismo que el nombre en el título.
   • Se dan el intervalo de giro y las condiciones de parada de la rotación.

Define una variable num al mismo nivel que la función rolling y establece el valor predeterminado en -1. Establece num y el código específico dentro de la función rolling de la siguiente manera:

//...

// TODO: Por favor, complete esta función
let num = -1; // Índice del elemento donde se encuentra después de la rotación

function rolling() {
  time++; // Número de revoluciones más 1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // Realizar animación recursiva
  }, speed);
  num++; // Índice más 1
  if (num > 8) {
    // Si el índice es mayor que 7, restablece a 0, ya que hay 8 premios
    num = 1;
  }
  // Agrega la clase active al li ganador
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // Si el número de rotaciones es mayor que el número total de rotaciones, la rotación se detiene y el temporizador se cancela
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "índice");
    console.log($(".li" + num).text());
    // Muestra la información del premio ganado
    $("#award").text(
      `Felicitaciones por tu premio ${$(".li" + num).text()}!!!`
    );
    time = 0;
    num = -1;
    return;
  }
}

Probar el proyecto

En este paso, probarás el proyecto para asegurarte de que funcione como se espera. Sigue los pasos siguientes para completar este paso:

1. Guarda los cambios en el archivo js/index.js.
2. Actualiza la página en tu navegador.
3. Haz clic en el botón "Iniciar" para comenzar el sorteo de premios.
4. Observa la rotación del premio y la visualización de la pista del premio cuando la rotación se detiene.
5. Repite los pasos 3-4 varias veces para asegurarte de que el proyecto está funcionando correctamente.

El resultado final es el siguiente:

¡Felicitaciones! Has completado el proyecto de sorteo de premios. Si tienes alguna pregunta o encuentras algún problema, no dudes en preguntar.

Resumen

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