Inspiration

The idea for MoodAI was born out of a personal journey to understand how our emotions shape our daily lives, especially in the context of health and well-being. I was inspired by the countless times I noticed how a tough day could leave me reaching for comfort food or how a burst of energy begged for something vibrant and fresh. I wondered: what if there was a way to align our moods with intentional, health-focused choices—be it food, activities, or simple moments of reflection? The growing awareness of mental health and its deep connection to physical wellness fueled my desire to create a tool that empowers people to nurture both, seamlessly and playfully.

What I Learned

Building MoodAI taught me a ton about the interplay between technology and human experience. I dove into the psychology of emotions, learning how moods like happiness, stress, or sadness influence our decisions—and how small interventions can shift them positively. On the technical side, I sharpened my skills in JavaScript, CSS, and HTML, grappling with dynamic UI design and real-time interactivity. Integrating external APIs (like Unsplash for images) opened my eyes to the power of third-party tools, while crafting games like Tic-Tac-Toe and Snake reminded me how coding can be both functional and fun. Most importantly, I learned patience—debugging is a marathon, not a sprint!

How I Built It

MoodAI is a web-based platform designed to respond to your mood with tailored health and well-being recommendations. I started with a clean HTML structure, styling it with CSS to create a visually soothing, glassmorphism-inspired interface that feels modern yet calming. JavaScript powers the core functionality: mood buttons trigger dynamic content updates—recipes from a custom dataset, motivational quotes, and game suggestions. I built four mini-games (Tic-Tac-Toe, Memory Match, Snake, and Rock Paper Scissors) to offer playful stress relief, each coded from scratch with event listeners and state management. The food recommendation page connects moods to recipes, styled with a responsive grid layout. Challenges like modal management and game logic were tackled with modular functions and persistent testing.

Challenges I Faced

No project comes without hurdles! One big challenge was ensuring the games worked smoothly within the modal system—early versions of Tic-Tac-Toe and Snake had buggy resets and event overlaps, which I fixed by refining initialization logic. Integrating the mood-based recipe system meant designing a robust dataset that felt personal yet practical, which took multiple iterations. Browser compatibility threw curveballs, especially with CSS animations and grid layouts on mobile devices. Time management was another beast—balancing feature richness with polish was tough, but I prioritized user experience over perfection. Finally, debugging the Chess game (initially planned) proved too ambitious, so I simplified it to focus on core functionality.

Built With

• canvas-api
• chess.js
• chessboard.js
• cloudflare-(implied)
• css
• github-pages-(assumed)
• google-fonts
• html
• javascript
• local-storage
• none
• spotify-api-(partial)
• static-data
• unsplash-api
• web-browser
• youtube-api-(implied)