| Clear Weather | |
| Clouds | |
| Drizzle | |
| Rain | |
| Snow | |
| Thunderstorm | |
| Miscellaneous Weather |
This SVG clock was the final project givin in the class "IFT1005 - Design Web - 2022" at Université de Montréal. This clock shows the time and the weather of the next 24 hour for the University coordinates. It also displays the time of sunrise and sunset, as well as displays the current moon phase. This application is made with SVG and JS.
The hour is pointed by the green arrow rotating around the clock.
The minutes are shown by the slightly changing opacity green number. The seconds are constantly moving around the inner ring of the clock.
The weather forecast and sun/moon information are provided by Open Weather Map - One Call API (click to consult the JSON or the API documentation). The colors follow the legend provided for the weather forecast in the next 24 hours.
For the exact time for sunrise and sunset or the exact moon phase consult the console screen. Moon phase 0 and 1 are 'new moon', 0.25 is 'first quarter moon', 0.5 is 'full moon' and 0.75 is 'last quarter moon'.
Stars and sun were made in SVG and are purely decorative.
Last modified after teacher's grading. Changes were made to how the time was synchronized (too many setInterval() were used).
A friend pointed out that the moon phase wasn't implemented following real life standard, so corrections were made to the moon display.
Code was translated from french to english.
Final update May 24 2024 - new subscription plan needed and updated API key.