Lucky draw ⭐️⭐️ service board

Task: Simulate a gold digger raffle

There is a daily lucky draw on the Nuggets website. Students can try to create a similar lucky draw page by imitating this feature.

Task analysis (Requirement analysis) Roadheader mobile prototype drawing

Raffle page ⭐️

  1. The main page
Lucky draw Draw complete
  1. Sign-in entrance, spectator awards, winners broadcast
Sign in Onlookers awards The winning broadcast

My harvest page
My harvest _ rewards in kind My gain _ my prop

Raffle rules page
Sweepstakes rules

Check in to the Winning gift page

Task requirements (❓ Basic version: realize lottery front page)

I started writing this page as if I didn’t know what to do, how to get started. Seeing the homework uploaded by students, I have a direction and more motivation.

Search technical article, the keyword began directly is “lucky draw”, “nuggets lucky draw”, original search, read a few more also know that this is “nine grid lucky draw” program, search keyword implementation is also more accurate.

With no reference at all, with no intuition to see the task,

  1. Realize the nine grid page
  2. Sweepstakes button event binding
  3. Show bounced
  4. . (None)

With some technical articles to implement the idea of reference, with the concrete implementation steps of thinking,

  1. Project setup and deployment
  2. Name files and fields
  3. Lucky draw
  4. Can run
  5. Complete the Base version

I started to look forward to it,

  1. Advanced version of the implementation process

For me, even the learning intensity of the basic class is difficult, but this youth camp makes me have a belief that I can learn front-end development and other things. Even though I had the sense of urgency in class, the class reward mechanism, the teacher’s supervision, and the example set by my classmates, I still didn’t try my best to meet this rare challenge. There is a saying that the attitude towards a challenge is the attitude towards any challenge, but I have a little confidence that I can be more careful in any challenge in the future, more powerful in the next challenge, gradually grow and become stronger.

Use JS to simulate the lottery process

Nuggets raffle github

// createApp initializes

Manually set up the prize pool

The prize pool json

The probability of winning each prize

Initial ore number

// Free lucky draw

The amount of ore spent in each draw

Complete the drawing and give the winning result

/ / pseudo code

Draw many times, display the list of winners

1. Resource files 2. Rules 3Copy the code

  1. Basic version

Lottery front page, with JS simulation of the lottery process, you can manually set up the prize pool, the probability of winning each prize, the initial number of ore and the number of ore spent each drawing, after the completion of the lottery, given the winning results, multiple lotteries, display the winning list.

  1. premium

Because the lottery is done in the front end, it’s actually not reliable. NodeJS is used to implement a simple lottery service, complete the lottery process in the server side, give the lottery results, the front end is responsible for showing and demonstrating the lottery process. The prize setting and winning probability of the server can be configured.

  1. pluses

On the basis of the completion of version 2, the backstage of prize pool management and prize configuration is provided. There is a simple page where the administrator can configure the total number of prizes, the probability of winning a single lottery and control the timing of the release of the prize.

The background can be simplified without having to do a real user login.

  1. Additional requirements

Independent, good code style, design documentation and deployment documentation.

Submit the code to GitHub or GitEE for local deployment.