Mood Quotes

Inspire your day with mood based quotes tailored just for how you feel.

Comment

Inspiration

There are plenty of quote apps out there like Motivation Daily Quotes or the Bible app, which shares daily verses to start your day. But I wanted to take that familiar idea and make it more personal. Instead of just showing random quotes I thought what if the quotes matched how you're actually feeling? Whether you’re anxious before a test, super motivated, or just exhausted after a long day, sometimes the right words can really make a difference. That’s what inspired me to build Mood Quotes a simple, calming app that delivers an uplifting or comforting quote based on your current mood.

What it does

You pick how you're feeling from a list, like happy, sad, stressed, or confident and Mood Quotes gives you a quote that matches that emotion. The design is soft and clean, with a calm minimalistic beige background, animated transitions, and a font that feels friendly. It’s meant to be a quick, feel good experience that anyone can use.

How I built it

I used just HTML, CSS, and JavaScript, no frameworks or libraries. I focused on keeping the layout simple but aesthetic, with fade in animations, a dropdown menu, and styled components that look nice on both desktop and mobile. All the quotes are stored in JavaScript, grouped by emotion, and it picks one at random based on what you choose.

Challenges I ran into

The hardest part was honestly making it feel right. I wanted the UI to feel soothing and I spent time tweaking the colors, spacing, and animations to get that soft vibe. I also had to make sure the quote animations would re-trigger smoothly each time you change moods, which involved a little trick using JavaScript and CSS classes.

Accomplishments that I am proud of

This was built from scratch, and it feels polished like something I’d actually want to use myself. I didn’t want to overbuild it, and I think I struck a good balance between simple and beautiful. Also proud that I focused on vibe as much as function.

What I learned

I got better at combining design with interactivity. Things like animation timing, hover effects, and how important it is to make your app feel good, not just work. I also learned how much power there is in using plain JavaScript to dynamically update a UI when it’s done right.

What's next for Mood Quotes

The next step would definitely be adding more moods but in a way where it's not overwhelming. I’d love to make this more personal as well like letting users save their favorite quotes. I would be interested in building a mobile app version for sure. There’s a lot of ways this could grow, but I’m happy with this as a first step.

Built With

Share this project:

Updates