The aim of this course was to get a deeper understanding of the framework Svelte. We created a weather application that displays data about the current weather for the city entered. In addition, the current moon phase and sunrise and sunset data can be displayed. The website is built with the framework Svelte, OpenWeather API and the lunarphase-js javascript library.
The aim of this course was to get a deeper understanding of the framework Svelte. We created a weather application that displays data about the current weather for the city entered. In addition, the current moon phase and sunrise and sunset data can be displayed. The website is built with the framework Svelte, OpenWeather API and the lunarphase-js javascript library.
UI Elements
Day view
The following weather information is displayed in the day view: temperature, probability of rain, wind strength, cloudiness and air pressure. In addition the correct illustration is displayed to match the weather. The background adapts to the colour of the weather. We receive the data for the weather view via the API from Open Weather.
Night view
In the night view you get information about when the sun rises and sets. Furthermore the current moon phase is shown. Depending on the time either the night view or the day view is displayed. The current moon phases are calculated via the Javascript library.
Switch view - toogle button
In the day and night view it is possible to switch to the other view. This is possible via a button in the header next to the search bar.
