Sunset Countdown Clock

A minimalist clock that visually counts down to sunset. It uses your location to transform your screen into a dynamic sky, helping you catch the day's most beautiful moment.

Comment

What Inspired Me

In a world dominated by rigid, numerical clocks, we've become disconnected from the natural rhythms that have governed life for millennia. The standard digital clock creates a sense of urgency and anxiety, counting down to deadlines and appointments. I was inspired to create the opposite: a clock that encourages mindfulness and connects us to the most beautiful, fleeting moment of each day—the sunset.

The idea for the Sunset Countdown Clock came from a desire to build a tool that wasn't about productivity, but about presence. Instead of telling you what time it is, it tells you how much time is left to experience something beautiful. It’s a gentle reminder to pause, step outside, and appreciate the daily spectacle of the sun dipping below the horizon.

How I Built It

This project is a testament to the power of modern, "vanilla" web technologies, built with a focus on simplicity and performance.

  1. Core Structure: The foundation is a single index.html file. I intentionally avoided complex frameworks to keep the project lightweight and ensure it could be deployed instantly on any static hosting service.

  2. Geolocation: To make the experience personal, the app first needs to know where you are. I used the browser's built-in navigator.geolocation API, which prompts the user for permission and returns their coordinates.

  3. Calculating Sunset: Reinventing the wheel for astronomical calculations is a monumental task. Instead, I integrated the lightweight and highly reliable suncalc.js library. This library does the heavy lifting of calculating the precise sunset time based on the user's latitude, longitude, and the current date. The core of such calculations involves the solar position, which can be modeled with equations like the Equation of Time, $E_t$:

    $E_t = 9.87 \sin(2B) - 7.53 \cos(B) - 1.5 \sin(B)$ where $B = \frac{360}{365}(d - 81)$ and $d$ is the day number. This formula helps correct the difference between the time measured by a sundial and a clock. suncalc.js handles all of this complexity behind the scenes.

  4. The Dynamic Clock: The magic happens in a central tick() function, which runs every second using setInterval. In each tick, the app:

    • Calculates the difference between the sunset time and the current time.
    • Updates the countdown text displayed on the screen.
    • Calculates the minutes remaining and passes this value to a function that updates the background. The background is a CSS linear-gradient that transitions between different color palettes—from a bright blue "Day" sky to a warm orange "Golden Hour" and finally to a deep purple "Night."

Challenges I Faced

The most significant challenge was testing the time-dependent features. How do you check if the background correctly changes to the "Golden Hour" gradient without waiting around all day?

My solution was to implement a time-mocking mechanism. I added a manualTime variable to the code. When this variable was set, the entire application would use it as the "current time" instead of the actual new Date(). This allowed me to instantly simulate any time of day, for example:

// Simulate a time 30 minutes before sunset
let manualTime = new Date(sunsetTime.getTime());
manualTime.setMinutes(manualTime.getMinutes() - 30);

This made it incredibly easy to test every visual state of the application in seconds, a crucial capability in a time-constrained hackathon environment.

What I Learned

  • The Power of APIs: This project reinforced how much can be accomplished by standing on the shoulders of giants. Integrating the Geolocation API and suncalc.js allowed me to build a powerful, context-aware application without getting bogged down in low-level complexities.

  • Code Separation is Key: Initially, my tick() function did everything—calculations, DOM manipulation, and styling. I refactored this into smaller, single-responsibility functions (updateCountdownDisplay, updateBackgroundStyle). This made the code cleaner, easier to debug, and more maintainable.

  • Minimalism is a Feature: The biggest lesson was that an application doesn't need to be complicated to be effective. By focusing on a single, well-executed idea, the Sunset Countdown Clock delivers a unique and memorable experience that a more feature-bloated app might lose.

Built With

Share this project:

Updates