FRONTEND · API-INTEGRATION

En dynamisk vejrapp med fokus på data og visuel oplevelse

Et mindre frontend-projekt, hvor jeg har arbejdet med aktuelle vejrdata, tidspunkt på dagen og skiftende billeder.

Idéen opstod, fordi jeg gerne ville udfordre mig selv med et projekt, jeg kunne bygge fra bunden på egen hånd. En vejrapp virkede som et godt valg, fordi den både gav mig mulighed for at arbejde med data, JavaScript og det visuelle udtryk.

Jeg ville gerne gøre appen lidt mere levende end en klassisk vejrudsigt. Derfor skifter billederne alt efter vejret og tidspunktet på dagen. Selve designet har jeg holdt enkelt, så det er nemt at finde de vigtigste vejrinformationer.

← Tilbage til projekter

Teknisk løsning

Udvikling

Jeg byggede appen med HTML, CSS og JavaScript og hentede vejrdata fra Open-Meteo API. Når brugeren søger efter en by, finder appen først koordinaterne og bruger dem derefter til at hente den aktuelle temperatur, vind, luftfugtighed og vejrudsigt.

JavaScript binder oplevelsen sammen. Det omsætter API'ets vejrdata til forståelige beskrivelser og vælger det billede, der passer til vejret og tidspunktet. Undervejs tilpassede jeg også løsningen, så den fungerer på både mobil og desktop.

Weather App vist på en bærbar computer med vejrudsigt for Odense

Erfaring og læring

Hvad jeg har lært

Projektet har gjort mig mere tryg ved at arbejde med API'er, fetch(), async/await og DOM-manipulation. Jeg lærte især meget af at skulle få flere typer data til at spille sammen og omsætte dem til noget, der giver mening for brugeren.

Det vigtigste, jeg tager med mig, er erfaringen med at føre en idé hele vejen fra det første design til en fungerende løsning. Appen er enkel, men den viser godt, hvordan kode og visuelt design kan understøtte hinanden.

Prøv Vejrappen → Se GitHub-repository →

Fordeling af JavaScript, CSS og HTML i Weather App-projektet