Skip to content

Latest commit

 

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

Spinning Name Wheel

A simple, self-contained, and customizable spinning wheel built with vanilla HTML, CSS, and JavaScript. This interactive tool allows you to enter a list of names and spin a wheel to randomly select a winner. It's perfect for classroom activities, giveaways, or any situation where you need a fun, random selection.

Features

  • Dynamic Wheel Generation: The wheel is drawn dynamically using the HTML5 Canvas API based on the list of names provided.
  • Customizable Entries: Easily add, edit, or remove names from the list in a simple text area.
  • Real-time Updates: Click the "Update Wheel" button to instantly redraw the wheel with the new list of names.
  • Smooth Spin Animation: A satisfying spin animation with realistic deceleration.
  • Clear Winner Display: The selected winner is prominently displayed after the wheel stops.
  • No Dependencies: Everything is contained in a single wheelofnames.html file. No libraries, frameworks, or internet connection required to run.
  • Modern UI: A clean and responsive design that works well on different screen sizes.

How to Use

  1. Open the wheelofnames.html file in any modern web browser.
  2. The wheel will load with a default list of names.
  3. In the "Student List" box on the right, edit the names. Make sure there is one name per line.
  4. Click the Update Wheel button to apply your changes.
  5. Click the Spin the Wheel! button to start the spin.
  6. Wait for the wheel to stop and reveal the winner!

File Contents

  • wheelofnames.html: The single file containing all the HTML structure, CSS styling, and JavaScript logic for the spinning wheel application.

About

A dynamic spinning wheel written in only static html. You can add a list of names and modify that list.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages