Mood Mirror

Inspiration

I wanted to build something simple yet meaningful as my very first website. Mental health is important for everyone, so I decided to create a tool that helps people reflect on their mood in a fun, colorful, and supportive way.

What it does

Write down their mood in a daily journal. See a motivational quote + emoji that matches their mood. View a history of past moods. Explore tips for stress relief and positivity. Access resources and helpful links.

How we built it

I built Mood Mirror using only vanilla HTML, CSS, and JavaScript. I stored moods in the browser’s LocalStorage, so users can come back and see their past entries. The design is lightweight, colorful, and responsive so it looks good on different devices.

Challenges we ran into

This was my first website ever, so I had to learn the basics of structuring HTML, styling with CSS, and making interactive features with JavaScript. Figuring out how to save data in LocalStorage and then display it again was tricky at first. Designing a clean, user-friendly UI with tabs for different sections was challenging but fun.

Accomplishments that we're proud of

I successfully completed my first website project! 🎉 The app is interactive, helpful, and looks good. I added multiple tabs (Journal, History, Tips, Quotes, Resources), which made it feel like a real application. I learned how to connect everything together and deploy it online.

What we learned

Basics of web development: HTML, CSS, and JavaScript. How to use LocalStorage to save data in the browser. How to deploy a static site using Netlify. The importance of good UI/UX design to make apps more engaging.