Free spinner wheel and random name picker, and how to make your own

A wheel that picks fairly, with your own names on it

You'll describe the wheel to a free AI assistant, paste what it writes into a file, and open it in your browser. Then add sound, options and a full-screen mode, one step at a time.

• A big wheel that slows down like a real one, with a tick for every slice
• A fair pick every time, using your browser's secure random numbers
• A winner pop-up with "Remove this entry" and "Spin again"
• Quick lists, colour themes, spin length and a list of results
• A full-screen mode for the classroom whiteboard
• A link that shares your wheel, with nothing stored on a server

Good for: teachers picking who answers next, families settling who goes first or what's for tea, prize draws at a fete or on a stream, and anyone who wants a fair "you choose".

What you need

Build it in six steps

Step 1 gives you a simple version that works, and each step after it adds more. The demo at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. Ask for the wheel

   Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me a "spin the wheel" random picker that runs in a web browser.
   
   Requirements:
   - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, no internet needed. I will save it and double-click it.
   - A big round wheel drawn on a canvas, split into equal coloured slices, one for each entry, with the entry written along its slice. A pointer at the top shows which slice wins.
   - A text box beside the wheel where I type the entries, one per line. The wheel updates as I type. Start with a few example names.
   - A Spin button in the middle of the wheel. Clicking the wheel itself spins it too. It should start fast and slow down smoothly to a stop, like a real wheel, over about 6 seconds.
   - When it stops, show a pop-up with the winner in big letters and a "Spin again" button.
   - Save my entries in localStorage so they're still there next time.
   - A clean design: a dark background, bright slice colours, and text that is easy to read on every slice.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Copy the code, paste it into your text editor, and save it as spinner-wheel.html. Double-click it, type a few names and give it a spin.

2. Make it properly fair

   A wheel is only useful if nobody can argue with it. This makes sure every slice has exactly the same chance, and that the pop-up always matches the pointer.

   Copy this promptCopy

   That works, thank you. Please make sure the wheel is completely fair:
   - Use crypto.getRandomValues for the random numbers, not Math.random.
   - Pick the winner first, then work out exactly how far to spin so the pointer stops inside that slice, not right on a line between two slices.
   - After it stops, read the winner from the angle the wheel actually stopped at, so the pop-up always matches the slice under the pointer.
   - Make the wheel sharp on phones and high-resolution screens by using devicePixelRatio.
   
   Send me the complete updated file.

   Always ask for the complete file. Replace everything in spinner-wheel.html, save, and refresh the tab (F5 or Cmd+R).

3. Add the tick, tick, tick

   The ticking is what makes a wheel feel real. The browser can make the sound itself, so you don't need any sound files.

   Copy this promptCopy

   Please add sound using the Web Audio API, with no sound files:
   - A short click each time a slice passes the pointer, so it goes tick-tick-tick and slows down with the wheel. With lots of entries, play no more than about 30 clicks a second.
   - Make the pointer flick back a little on each click, as if it's hitting a peg.
   - A soft two-note chime when it stops.
   - A "Sound on / Sound off" button, remembered in localStorage.
   - Only start the audio after the first click, because browsers block sound until you tap something.
   
   Send me the complete updated file.

4. Add winners, quick lists and options

   Copy this promptCopy

   Please add these options, keeping the layout clean:
   - In the winner pop-up, a "Remove this entry" button that takes the winner off the wheel.
   - A tick box, "Remove winners automatically", for picking names one at a time until everyone has had a go.
   - A Results list of the last 30 winners, newest first, with the time, and a Clear button.
   - Quick lists that replace the entries with one tap: "Names", "Yes / No", "1 to 10" and "What's for dinner?". Show an Undo in case I tap one by mistake.
   - Shuffle and Clear buttons for the entries.
   - Colour themes: Bright, Pastel, Rainbow and Ocean.
   - Spin length: Short (3 seconds), Normal (6) and Long (10).
   - Allow up to 200 entries. With lots of entries, make the text smaller, cut long names short with "…", and leave the text off when slices get too thin to read.
   Save all the settings in localStorage.
   
   Send me the complete updated file.

5. Make it work on the whiteboard and on phones

   Copy this promptCopy

   I want to use this on a classroom whiteboard and on my phone:
   - A "Full screen" button that shows just the wheel, as big as the screen allows, with the pop-up still working. Use the Fullscreen API, and if the phone doesn't support it, cover the whole page instead. Escape exits.
   - The Space bar spins the wheel, but not while I'm typing in the entries box. Stop Space from scrolling the page when it spins.
   - On phones, put the wheel at the top and the entries underneath. A tap spins it, and nothing scrolls sideways.
   - If the device is set to reduce motion, start with the short spin.
   
   Send me the complete updated file.

6. Share your wheel with a link

   The list goes inside the link itself, after a # sign, so nothing needs storing on a server. For the link to work on other people's devices, put the page online for free first (see free hosting, about 10 minutes).

   Copy this promptCopy

   Please add a "Copy link" button that puts my current entries and colour theme into the page's link, so I can send the wheel to someone else.
   - Put the list after a # sign as JSON, turned into base64 that is safe to use in a link. Make it work with accents and emoji (use TextEncoder and TextDecoder).
   - Build the link from location.origin + location.pathname so it still works when the page is online.
   - When the page opens with one of these links, load that list onto the wheel and say "This wheel came from a shared link", with an Undo that brings back my own list.
   
   Send me the complete updated file.

Quick fixes

Please add a hidden test: if the page address ends with ?test, pick a winner 10,000 times using the same code as the spin (without the animation), and show how many times each entry won. They should all come out roughly the same. Send me the complete file.

Twist it into something else

A fair wheel can settle almost anything. Change the first prompt to make:

Your list, your wheel, no adverts

Wheel websites are handy, but they're often covered in adverts, and some keep your list on their servers. Yours is one small file that works without the internet, keeps your class list on your own device, and does exactly what you need: bigger slices for the raffle, a chore list for the kids, your own colours. It's a great first project too, because you'll see the AI handle drawing, animation and sound in one go.

What to build next