Simple Prize Draw Application

Introduction

In this project, you will learn how to create a simple prize draw application using JavaScript and jQuery. The application will simulate a prize draw by rotating a list of prizes and displaying the winning prize when the rotation stops.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the project files and directories
• How to implement the rolling function to handle the prize rotation and display the winning prize
• How to test the project to ensure it works as expected

🏆 Achievements

After completing this project, you will be able to:

• Use JavaScript and jQuery to create interactive web applications
• Implement a simple animation loop using requestAnimationFrame
• Handle user interactions and update the UI accordingly

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

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

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 manually refresh it to see the page.

Implement the Rolling Function

In this step, you will implement the rolling function in index.js using jQuery or JavaScript. Follow the steps below to complete this step:

1. Find the rolling function in index.js.

2. Refine the rolling function to achieve the following requirements:

   • When you click the start button, the class element of li1 is the starting point, and the yellow background (class .active) is rotated clockwise on the prize.
   • When the rotation stops, the award hint is displayed in the id as the award element of the page. The award hint must contain the name of the award, which must be exactly the same as the name in the title.
   • The spin interval and spin stop conditions are given.

Define a variable num at the same level as the rolling function and set the default value to -1. Set num and the specific code within the rolling function as follows:

// ...

// TODO: Please complete this function
let num = -1; // Element index where it is located after rotation

function rolling() {
  time++; // Revolutions plus 1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // Perform recursive animation
  }, speed);
  num++; // Index plus 1
  if (num > 8) {
    // If index is above 7, reset to 0, as there are 8 prizes
    num = 1;
  }
  // Add active class to the winning li
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // If the number of rotations is greater than the total number of rotations, the rotation is stopped and the timer is cleared
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "index");
    console.log($(".li" + num).text());
    // Show winning information
    $("#award").text(
      `Congratulations on your prize-winning ${$(".li" + num).text()}!!!`
    );
    time = 0;
    num = -1;
    return;
  }
}

Test the Project

In this step, you will test the project to ensure it works as expected. Follow the steps below to complete this step:

1. Save the changes to the js/index.js file.
2. Refresh the page in your browser.
3. Click the "Start" button to start the prize draw.
4. Observe the rotation of the prize and the display of the award hint when the rotation stops.
5. Repeat steps 3-4 a few times to ensure the project is working correctly.

The finished result is as follows:

Congratulations! You have completed the Prize Draw project. If you have any questions or encounter any issues, please don't hesitate to ask.

Summary

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