Horizon

• 

• 

• 

• 

• 

• 

Inspiration

In today’s digital world, students and creators constantly struggle with distractions. Social media, notifications, and lack of structured time management reduce productivity and focus.

We built Horizon to help users regain control over their time through a clean, distraction-free focus system inspired by the Pomodoro technique. Our goal was simple: create a minimal yet powerful environment where users can focus deeply, manage tasks efficiently, and build consistent work habits.

What it does

Horizon is a productivity web application designed to improve focus and task management.

It allows users to:

Start distraction-free focus sessions

Automatically switch between Focus and Break modes

Customize session durations

Track work sessions

Create and manage daily tasks

Visually monitor progress using a dynamic timer circle

The system encourages structured productivity by automatically guiding users between work and rest cycles.

How we built it

We built Horizon using:

HTML for structure

CSS for styling and clean UI design

JavaScript (Vanilla JS) for dynamic timer logic and task management

LocalStorage to store user preferences like name and avatar

The focus timer was built using:

setInterval() for countdown logic

Dynamic DOM manipulation

Conic-gradient CSS for circular progress animation

Auto mode switching between focus and break sessions

The goal was to keep the architecture simple, lightweight, and fully functional without relying on heavy frameworks.

Challenges we ran into

Managing multiple timer states without conflicts

Preventing duplicate event listeners and DOM issues

Synchronizing tab switching logic with timer resets

Ensuring auto-switch between sessions worked smoothly

Handling edge cases when users change duration mid-session

Debugging timer logic and state handling was one of the biggest technical challenges.

Accomplishments that we're proud of

Built a fully functional focus system from scratch

Implemented automatic session switching

Created a dynamic circular progress indicator

Designed a clean and modern UI

Developed a structured and scalable codebase

Most importantly, we created something that genuinely improves daily productivity.

What we learned

Through building Horizon, we learned:

How to manage application state effectively

The importance of clean code structure

Debugging complex timer-based logic

DOM manipulation best practices

How small UX details greatly impact user experience

We also improved our problem-solving skills by breaking down complex features into manageable modules.

What's next for Horizon

We plan to expand Horizon by:

Adding analytics and productivity tracking

Implementing user authentication and cloud sync

Adding dark/light themes

Creating a mobile app version

Introducing team collaboration features

Our long-term vision is to transform Horizon into a full productivity ecosystem for students and professionals.

Built With

• api
• css3
• html5
• javascript
• json
• localstorage
• tailwind