EmoMirror

A fun and interactive mood-detection web app using HTML, CSS, and JavaScript that mirrors your emotions with animations, background changes, and mood-based music.

Comment

Inspiration I wanted to create something simple, creative, and fun that connects technology with emotions. People often rely on music or quotes to match their feelings, so I built a project that instantly reflects your mood like a mirror.

What it does EmoMirror lets users select their mood, and based on that: -Displays an emoji representing the chosen mood -Shows a motivational or mood-related quote -Suggests music tracks that align with the emotion -It’s like a personal emotional mirror that helps uplift or complement your state of mind.

How I built it -HTML for structure -CSS for design and animations -JavaScript for dynamic interactivity and mood handling -A curated set of quotes and music suggestions mapped to moods

Challenges I ran into -Designing an engaging UI that’s still simple and lightweight -Creating a mood-to-music mapping that feels natural -Keeping the code clean and easy to expand for future features

Accomplishments that I'm proud of Built a fully working mood-based app in a short timeframe Designed a smooth and interactive user experience Successfully combined quotes, emojis, and music to reflect emotions

What I learned -The power of frontend technologies (HTML, CSS, JS) in building interactive apps -How design choices strongly impact user engagement and mood perception -The importance of simplicity in delivering a creative hackathon project

What's next for EmoMirror -Add AI-powered mood detection via webcam or text input -Expand the music and quote library for better personalization -Create a mobile app version for wider accessibility -Enable sharing moods with friends on social media

Built With

Share this project:

Updates