HTML JS CSS Random Wheel Spinner

• Status: Closed
• Prize: $50
• Entries Received: 3
• Winner: abderazakhouaiss

Winner

Contest Brief

Hi, I have a fun project for a developer with great HTML, CSS and JS skills.

A random wheel spinner tool, similar to https://wheelofnames.com

I have attached a PDF with the designs, here are my detailed instructions:

PDF page notes

1.
- The default view, when someone visits first time.
- If someone has a link with URL parameters then the wheel uses those.
- The wheel spins very slowly when we enter the page.

2.
Here you can see how the wheel changes when there are only 2 items.
- When a new item is added to the list the wheel must detect the change and update, see https://wheelofnames.com for example.
- The URL parameters must also update when there is a change to the list,
- and also the ‘Share and Save’ URL link updates

3.
- When you click Go! the wheel starts spinning for a random amount of time between 4 and 6 seconds.
- The go button changes to red question mark when spinning.
- The names list becomes inactive

4.
When a winner has been selected:
- The winner flashes between colour and white
- The other segments go dark
- The button changes to purple and ‘!!!’
- The winner is added to the Results list

After 6 seconds:
- colours come back
- button returns to green and Go!
- Names list becomes active

5.
As you can see every time the wheel is used the winners are added to the Results list on the right side.

6.
The mobile version is quite simple, I think the difficult part will be the responsive wheel spinner?

Recommended Skills

• CSS
• HTML
• JavaScript