Moodly - Your Daily Mood Journal

A simple web app to track your daily mood and get an instant motivational quote. It makes mood tracking fun, easy, and visually appealing, helping users reflect and stay inspired.

Comment

Inspiration

We created Moodly because staying mindful of our emotions can easily get overlooked in daily life. Logging your mood and seeing a motivational quote each day encourages self-reflection and positivity in a simple, fun way.

What it does

  • Lets users select their current mood (Happy, Sad, Neutral, Stressed, etc.)
  • Displays an instant motivational quote tailored to the chosen mood
  • Optionally stores past moods so users can reflect on trends
  • Helps users start or end the day with a small, positive ritual

How we built it

  • Frontend: HTML, CSS, and vanilla JavaScript for quick UI and interactivity
  • Storage: localStorage to save past moods without a backend
  • Quotes: Static JSON file mapping moods → quotes

Challenges we ran into

  • Deciding how to store past moods efficiently without a backend
  • Making the UI intuitive yet visually appealing with minimal CSS
  • Choosing quotes that were meaningful but short enough to display nicely

Accomplishments that we're proud of

  • Designed a clean, colorful, and responsive interface that works on desktop and mobile
  • Created a positive, user-friendly experience that’s easy to use and understand

What we learned

  • How to use localStorage for persisting user data in the browser
  • Basics of connecting UI actions (clicking moods) to dynamic content display
  • The importance of clean, minimal design for small web projects

What's next for Moodly - Your personal AI mood tracker

  • Add user authentication to save moods across devic
  • Integrate an external quote API for dynamic, varied quotes
  • Visualize mood trends with charts or graphs for insights over time

Built With

Share this project:

Updates