Focus++

• 

  Daily_task_light_mode

• 

  Goal_tracker_light_mode

• 

  pomodoro_timer_light_mode

• 

  Breathing_exercise_light_mode

• 

  Daily_reflection_light_mode

• 

  Home_page_light_mode

• 

  Home_page_dark_mode

• 

  Goal_tracker_dark_mode

• 

  pomodoro_timer_dark_mode

• 

  Daily_task_dark_mode

• 

  Daily_reflection_dark_mode

• 

  Breathing_exercise_dark_mode

Inspiration

Distractions are everywhere, and while Pomodoro timers help with focus, they often miss the bigger picture—reflection, goals, and mental well-being. I wanted to build a tool that not only keeps you productive but also helps you stay mindful and balanced.

What it does

Focus++ is a lightweight productivity app that runs entirely in the browser. It features:

• Smart Pomodoro timer for focus and rest cycles.
• Daily journal for reflections and gratitude.
• Task and goal tracking with progress indicators.
• Breathing exercise module for relaxation.
• Data persistence via localStorage.

How we built it

• Tech stack: 100% vanilla HTML, CSS, and JavaScript.
• Pomodoro cycles: Built with setInterval() logic.
• Journal & tasks: Saved in localStorage for offline persistence.
• Breathing exercises: CSS transitions + JavaScript timing.
• UI/UX: Responsive, clean, and minimal with subtle animations.

Challenges we ran into

• Managing multiple features in a simple, uncluttered interface.
• State persistence without a ~backend~ (localStorage only).
• Coordinating timers, animations, and user input smoothly.
• Keeping the app lightweight yet feature-rich.

Accomplishments that we're proud of

• Built a full productivity suite using only vanilla web technologies.
• Designed an app that balances productivity with mindfulness.
• Created a smooth and responsive user experience without frameworks.

What we learned

• Advanced use of JavaScript DOM manipulation and event handling.
• Effective use of localStorage for state management.
• The importance of design choices (colors, animations, and reminders) for motivation.

What's next for Focus++

• Add statistics dashboards (charts for streaks, tasks, and goals).
• Sync data with the cloud for multi-device use.
• Introduce customizable Pomodoro sessions and reminders.
• Expand mindfulness features with guided meditations.

Built With

• css
• html
• javascript