Inspiration

In today’s fast-paced world, productivity and well-being often feel disconnected. We rely on multiple apps—one for tasks, another for mood tracking, and a third for journaling—yet this fragmentation makes consistency difficult. MoodTracker was inspired by the idea of bringing focus and self-care together in one lightweight tool, helping users stay organized while also reflecting on their mental health.

What it does

To-Do List – Create, complete, and manage tasks with ease.

Mood Tracker – Log your daily mood using an intuitive emoji scale.

Diary – Capture reflections and notes tied to specific dates.

Offline Persistence – Data is stored locally with localStorage.

Theme Toggle – Switch seamlessly between light and dark mode.

How we built it

Frontend: Pure HTML, CSS, and JavaScript (no frameworks or libraries).

Storage: Browser localStorage ensures offline access and persistence.

UI Design: A clean, minimal grid-based layout for clarity.

Logic: Vanilla JS manages state for tasks, moods, and diary entries.

Challenges we ran into

Designing a minimal yet feature-rich interface without overwhelming users.

Implementing search, filters, and sorting efficiently in vanilla JS.

Managing state persistence entirely client-side with no backend.

Striking the right balance between simplicity and functionality.

Accomplishments that we're proud of

Built a multi-feature productivity + wellness app from scratch.

Mastered localStorage to persist structured data effectively.

Combined organization and self-reflection in one unified tool.

Created an app that is offline-ready, lightweight, and dependency-free.

What we learned

The importance of intuitive UX when combining multiple tools into one.

Effective state management with browser APIs.

How small details (emoji moods, theme toggle) can significantly boost engagement.

What's next for MoodTracker

📊 Add visual analytics to track mood and productivity trends.

🔔 Introduce task reminders and journal notifications.

☁️ Implement cloud sync for cross-device access.

📱 Package as a PWA or desktop app (Electron) for standalone use.

Built With

Share this project:

Updates

Submission history