Back in 2013, I launched this little web app that calculated the sunrise and sunset times of the visitor and displayed a nice graph of the total amount of daylight over time.
The app was primarily for my dad, since at the time, his method for calculating and tracking our exit from the darkness of winter consisted of a newspaper, a dry erase marker, and the side of a refrigerator.
Well, today that app is reborn! The functionality is pretty much the same, but it's been totally overhauled to now be written in React, Sass, and Typescript (much like the rest of this website).
Check it out here: Daylight Graph
When you visit the app, it will prompt you for your permission to obtain your location via the standard HTML5 geolocation API that's baked into pretty much every browser these days.
Once obtained (or typed manually into the latitude and longitude boxes), the app computes the sunrise/sunset time at that location for today's date. Then it works backwards calculating 99 more days and plotting them all on the canvas below. This visual representation of the daylight of each day over the past 100 days was not actually part of the original design requirement, but I feel like the visual representation of MOAR DAYLIGHT!!1!one is really encouraging in the doom and gloom of winter.
The most important part of the original project was the so-called "Minutes gained since last solstice" tracker. This diffs the daylight bars for the current day and the last solstice and spits out the number of minutes gained (or lost) between the two. Pretty neat, right?! I use the 21st as a good approximation for the day on which the solstice falls, even though sometimes it's a day off.
I actually have no interest in your location. All of the calculations are done offline in JS using an adapted version of the calculations NOAA uses on their Solar Calculator located over here. Have a look if you want to dive into some of the implementation details.
P.S. As of writing, we've gained 72 minutes of daylight since winter solstice back on Dec. 21st, 2020!