Name Selection Tumbler

Prompt

Code in html, css, and javascript a bingo or lottery style ball tumbler that is self-contained, complete, and embeddable. Create a ball tumbler with a Click to Start button. When clicked, the tumbler spins to tumble the contained colorful balls. Select one ball with the name of the winner on it. Make the balls look three dimensional along with the tumbler. Balls should be teal, royal blue, white, and gray with easily readable text that fits neatly on the ball. Use the following names with one name on each ball: Ruth, Sarah, Laurel, Holly, Melony, Jeanine, Marissa, Jessica, Avery, Kyler, Valerie Sanchez, Amanda, Melinda, Shalyn, Lisa, Tina, Anna, Karen, Mike, Micah, Lynda, Valerie Lynch, Makenlee, Tina, Sydnee, Kenna, Kloe, Shannon. Add a tumbling ball sound when the tumbler is working and a ding when a ball is selected. Remove the selected ball from the tumbler so no ball is selected more than once per round. Add a Reset button to return all balls to the tumbler to start a new round.

Iteration

I don’t see the tumbler or balls to make the selection. Double check the code and fix the view.

Iteration 2

Make the tumbling action happen more quickly in 4 seconds or less. Show the animated tumbling balls inside the tumbler for a more exciting experience. 

Iteration 3

The tumbler only works for one name and then tumbles forever on the next selection. I need to be able to tumble balls rapidly with a selection and prepare for the next selection in 4 seconds or less. Make the tumbler look more like the included image.

Iteration 4

The tumbler looks great, but there are no colored balls in side it for the selection to happen. Add the teal, royal blue, white, and gray balls with names on the balls in the tumbler.

Iteration 5

Terrible. The balls are pitch black. They are invisible and don't appear at all. Make the balls visible. Tumble for 4 seconds and select a random name. Make the Tumble button reset for the next selection. Double check the code again for accuracy.

Iteration 6

The balls appeared for about 2 seconds then they flew out of the tumbler never to be seen again. When I clicked Continue the tumble tumbles forever with no selection made. I need to make it possible to select each ball of the 28 at least once.

Iteration 7

In the initial prompt, I provided the names to be added to the balls in the tumbler. Can you add a user input right at the beginning to allow the user to input up to 40 names instead of the names I provided?

Reference Image