This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
🎡 Inspiration
Office breaks can get dull fast — especially when everyone’s on a different schedule and you’re stuck deciding what to do in your 5–10 minutes of free time.
I often found myself staring at my desk wondering: Should I grab coffee? Take a walk? Distract my friend?
So I created Wheel of Fun — a playful spin wheel built with HTML, CSS, and a touch of JavaScript to help me (and hopefully you) add a spark of randomness to boring office breaks.
Whenever you have a free moment, just spin the wheel — it’ll pick a small fun task to recharge your brain and make break time feel like a mini celebration.
Demo
Live Demo: Try the Wheel of Fun
Code: View on GitHub
Journey
I built this simple project to showcase how CSS can create playful, interactive art — not just static designs.
I used pure HTML, CSS for styling the wheel, lights, and animations, and added a small JS logic for spinning, confetti, and a playful modal pop-up to display what you won.
I loved experimenting with:
- CSS transforms for the wheel and bulbs
- Smooth rotations and easing for realistic spins
- A colorful, carnival vibe to bring a bit of joy to the office desk
Through this, I reinforced my CSS fundamentals, improved my eye for interactive UI details, and had fun turning a tiny idea into something shareable.
Next, I’d love to expand it by adding more random activities, themed wheels, or even office in-jokes to make break times even more personal and fun.
Feel free to fork it, remix it, or spin it your way!
Top comments (0)