• 

  Dummy login page

• 

  Spinning the roulette page

📚 Study Roulette – Project Story

🎯 Inspiration

The inspiration behind Study Roulette came from our personal struggles with task prioritisation and decision fatigue. As students, we often found ourselves overwhelmed by the number of tasks to complete, leading to procrastination. We wanted to build a solution that makes task selection fun, random, and motivating, just like spinning a roulette wheel.

💡 What We Learned

Throughout this project, our team learned:

• Backend development with Node.js and Express, including RESTful API design for task management.
• Frontend dynamic rendering using vanilla JavaScript to update task lists and modals efficiently.
• Event delegation best practices to handle dynamic DOM elements robustly.
• CSS layout and retro game-inspired UI styling, using the Press Start 2P font for a gamified aesthetic.
• Debugging skills, especially when dealing with event binding issues after DOM re-renders.

🛠️ How We Built It

1. Planning and wireframing the app layout, spinner logic, and user flows.
2. Backend development:
   • Created routes for adding, editing, deleting, and fetching tasks.
   • Built the roulette spin endpoint, dividing 360° equally among remaining tasks.
   • Implemented spin limits and task removal after selection.
3. Frontend development:
   • Developed HTML pages for login, task management, and roulette gameplay.
   • Used JavaScript to handle user interactions, localStorage for session persistence, and modal popups for editing tasks.
   • Implemented event delegation to ensure edit and delete buttons work even after re-rendering.
4. Styling:
   • Designed a retro game theme using custom CSS, ensuring responsive layouts and accessible fonts.

⚠️ Challenges We Faced

• Event binding issues: Initially, edit buttons stopped working after task list re-rendering. We solved this using event delegation to attach a single listener to the parent element.
• Modal visibility problems: Debugging CSS conflicts and ensuring modals appeared above all other content.
• Backend data persistence: Managing in-memory task pools for each user session and planning future database integration for scalability.
• Time management: Balancing feature scope within the limited Hackathon timeframe.

🚀 Final Thoughts

Study Roulette transformed our task management experience by making it fun and engaging. We hope it inspires others to approach studying with motivation, randomness, and a gamified twist.

Built With

• css
• express.js
• html
• javascript
• node.js