Fetch API (kmom05)

I den här uppgiften ska vi använda data utifrån. Datan hämtas via http-protokollet med hjälp av fetch och vi ska använda datan för att populera en tabell.

Förutsättning

Det förutsätts att du gått igenom artiklarna för kursmomentet samt är det en fördel om du gjort tidigare kursmoment. De ger dig koll på hur vi börjar jobba med JavaScript och webbläsaren.

Intro

Du ska bygga en applikation som belyser bland annat länders utsläpp av koldioxid. Du ska jämföra data för länderna Sverige, Norge och Danmark.

Datan som ska användas kommer från “Our World In Data (owid)”.

I koden ska vi använda Fetch API och hämta filerna från github på följande länk:

https://raw.githubusercontent.com/bth-webtec/teacher/refs/heads/main/kmom05/data/<filename>.json

Tänk på att <filename> byts ut mot landet du vill hämta (sweden, norway, denmark).

Datan innehåller en hel del nycklar och värden och du kan se en lista på dem i owid’s gitrepo.

Bra. Då har du nog allt du behöver för att gå igenom kraven.

Krav

Generell struktur

Du jobbar i mappen public/.

1. Skapa filen public/fetch.html och lägg till menyvalet i navbaren likt tidigare.

2. Skapa filen public/js/fetch.js och läs in den i fetch.html. Det är “startfilen” för din JavaScript.

3. Skapa filen public/css/fetch.css som sköter stylen för uppgiften.

När du är klar bör du ha följande filer, tillsammans med dina tidigare:

• Directorypublic

  • Directoryjs

    • fetch.js
  • Directorycss

    • fetch.css
  • fetch.html

1. Hämta datan

Ett tips är att börja med en tom tabell och ett “select element”.

1. Användaren ska via ett select element och en eventlyssnare kunna hämta data från alla filer. När man väljer ett årtal ska funktionen fetchData() triggas och du ska läsa in datan från alla tre länderna och det valda året.
2. Filerna ska hämtas med fetch API.
3. Använd async/await för att invänta datan.
4. Man ska bara kunna välja år mellan 1900 och 2019.

2. Presentera datan

1. Datan ska presenteras i en tabell med minst tre kolumner förutom landets namn.
2. Välj ut minst ett värde som ska jämföras och “vinnarens” cell ska markeras, tex grön bakgrundsfärg.
3. Alla tre länderna med respektive data ska visas i tabellen.
4. Väljer man ett nytt årtal rensas tabellen och den nya datan läses in och presenteras.

Hur kan det bli när du är klar?

Play

Exempel på hur det kan se ut när du är klar.

Validering

1. Dina webbsidor skall validera i W3C HTML validator.

2. Dina webbsidor skall validera i W3C CSS validator.

3. Din webbplats skall passera npx eslint public.

4. Din webbplats skall gå att starta via npx http-server.

Avslutningsvis

Lycka till och hör av dig om du kör fast eller har några funderingar.