MoodCheck

• 

  Mood Check

Inspiration

During high school, many teens, including myself, face daily emotional ups and downs — stress from exams, anxiety about social situations, or just feeling low energy. Often, there’s no quick, actionable guidance on how to cope or improve mood. I wanted to create something that provides instant, practical tips and encouragement in a friendly, teen-friendly way.

MoodCheck 🌱 was inspired by the idea that small actions and reminders can make a big difference for mental health, motivation, and daily well-being.

What I Learned

Building MoodCheck taught me how to:

Create a dynamic, offline-friendly web app using only HTML, CSS, and JavaScript.

Design a randomized tip system to make responses feel personal.

Organize content (quotes, actions, duas) in a structured JSON format for scalability.

Think about mental health impacts in UX design, like making guidance accessible and encouraging.

How I Built It

Database: Created a JSON structure containing moods, motivational quotes, actionable micro-tasks, and spiritual guidance.

Frontend: Single-page HTML/CSS/JS app with a dropdown for mood selection.

Randomization: Each mood selection randomly picks one quote, one action, and one dua from the dataset.

User Experience: Clean UI, calming colors, and clear feedback to keep the app simple and approachable.

Challenges

Designing tips that feel helpful for all moods without overwhelming users.

Making the app offline-friendly while still providing dynamic, randomized guidance.

Balancing mental health sensitivity and cultural inclusivity in the content.

Built With

• css
• html
• javascript
• json