Alright, so I messed around with something kinda fun today: a little MLB team randomizer using a spin-the-wheel type thing. Thought I’d share how I built it, in case anyone’s looking for a goofy side project.
First things first, I grabbed a list of all 30 MLB teams. I just googled it, honestly, and then copied and pasted it into a simple array in my Javascript file. Nothing fancy there.
Then I started thinking about the visual element. I wanted something that actually looked like a spinning wheel. I initially considered using a canvas element and drawing everything from scratch, but I’m lazy, so I opted for a CSS-based solution. I found some snippets online for creating a circular div and then split it into sections, each representing a team.
The CSS was a bit of a pain. I had to calculate the angles for each slice of the wheel based on the number of teams. Lots of trial and error involved, and a healthy dose of “why isn’t this working?!” moments. But eventually, I got a decent-looking wheel with all the team names crammed in there.
Next up was the spinning animation. This is where things got a little more interesting. I used CSS transitions to rotate the wheel. The trick was to generate a random angle to spin to. I used Javascript’s function to create a random number, then multiplied it by 360 to get an angle in degrees.
To make it feel more like a real spin, I added some easing to the transition. Instead of a linear spin, it started fast and slowed down gradually. This made it feel a lot more satisfying when it finally landed on a team.
The final step was to display the winning team. Once the spinning animation finished, I used Javascript to figure out which section of the wheel the arrow was pointing to and then displayed that team’s name in a separate element.
Here’s a quick rundown of the code (super simplified, obviously):
- HTML: A
divfor the wheel, sections for each team, and a display area for the result. - CSS: Styles to create the circular wheel, divide it into sections, and handle the spinning animation.
- Javascript: Code to generate a random spin angle, apply it to the wheel, and display the winning team.
It’s nothing groundbreaking, but it was a fun little project to build. I mainly did it to mess around with CSS transitions and practice my Javascript. Plus, now I have a way to randomly pick an MLB team to root for (even though I’ll probably still root for the underdogs!).
Things I’d improve:
- Make the wheel responsive. It looks kinda janky on smaller screens right now.
- Add team logos instead of just text.
- Maybe incorporate some sound effects for the spinning and winning.
Anyway, that’s it! Just a silly little side project. Hope you found it interesting!
