DecideMate

• 

  DecideMate: When Choices Overwhelm, Let the Wheel Decide

Inspiration

DecideMate was born out of a simple yet universal struggle: decision fatigue. Whether it's choosing what to eat, which task to tackle, or which movie to watch, we often waste time weighing options. I wanted to create a tool that makes decision-making fun, fast, and frictionless—especially for students and busy professionals. Inspired by spinning wheels and gamified interfaces, I envisioned a sleek, interactive app that turns indecision into delight.

What it does

DecideMate is a web-based decision wheel that lets users input multiple choices and spin to randomly select one. It features:

• A customizable input field for options
• A dynamic spinning wheel rendered on canvas
• Smooth animations with easing for realistic motion
• A result display that highlights the selected choice

How we built it

We used a combination of HTML, CSS, and JavaScript to build DecideMate:

Challenges we ran into

• Mapping rotation to correct segment: Translating the final angle into a selected option required precise math and debugging.
• Responsive design: Ensuring the wheel scaled properly across devices was tricky, especially with canvas rendering.
• User input handling: Validating entries and preventing duplicates or empty values needed careful logic.

Accomplishments that we're proud of

• Built a fully functional, visually appealing decision wheel from scratch
• Implemented realistic animation using easing functions
• Created a responsive and intuitive user experience
• Learned how to manipulate canvas and handle dynamic user input

What we learned

• Deepened our understanding of the Canvas API and animation techniques
• Learned how to apply easing functions for better UX
• Improved skills in JavaScript logic, especially around randomness and angle calculations
• Gained experience in responsive design and user validation

What's next for DecideMate

We plan to expand DecideMate with:

• 🎨 Theme customization (dark mode, color palettes
• 📊 Decision history tracking and analytics
• 🧠 Weighted choices for smarter decision-making
• 🤝 Multiplayer mode for collaborative decisions

Built With

• canvaapi
• css
• html
• javascript