Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Implementering af Filtreringsfunktionalitet | Opbygning af Blogwebstedet
Webudvikling med ChatGPT

bookImplementering af Filtreringsfunktionalitet

Mål

Sidst men ikke mindst er det sidste trin at tilføje funktionalitet til filtrering af artikler efter emne, hvilket implementeres ved hjælp af JavaScript.

Mulig prompt

Kan du implementere funktionen til at filtrere artikler efter emne ved hjælp af HTML-knapper og JavaScript?

Resultat

index.html fil

  • Vi tilføjer et nav-blok til header, hvor vores filtreringsknapper placeres;
  • Vi giver hver artikel attributten data-category og den tilsvarende emneværdi;
  • Vi tilføjer linket til index.js-filen før den afsluttende body-tag.

index.css fil
Vi tilføjer nogle stilarter for at gøre filtreringsknapperne pæne.

index.js fil
Vi indsætter scriptet, der implementerer filtreringslogikken.

Alt dette bad ChatGPT os om at gøre. Vi fulgte dets instruktioner.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Website-tilstand

Videovejledning

Her er det. Du har klaret det. Dette er din komplette, fuldt funktionelle hjemmeside. Flot arbejde!

question mark

Hvorfor tilføjer vi et data-category-attribut (som data-category="Health") til hvert <article>-element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 6

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

bookImplementering af Filtreringsfunktionalitet

Stryg for at vise menuen

Mål

Sidst men ikke mindst er det sidste trin at tilføje funktionalitet til filtrering af artikler efter emne, hvilket implementeres ved hjælp af JavaScript.

Mulig prompt

Kan du implementere funktionen til at filtrere artikler efter emne ved hjælp af HTML-knapper og JavaScript?

Resultat

index.html fil

  • Vi tilføjer et nav-blok til header, hvor vores filtreringsknapper placeres;
  • Vi giver hver artikel attributten data-category og den tilsvarende emneværdi;
  • Vi tilføjer linket til index.js-filen før den afsluttende body-tag.

index.css fil
Vi tilføjer nogle stilarter for at gøre filtreringsknapperne pæne.

index.js fil
Vi indsætter scriptet, der implementerer filtreringslogikken.

Alt dette bad ChatGPT os om at gøre. Vi fulgte dets instruktioner.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Website-tilstand

Videovejledning

Her er det. Du har klaret det. Dette er din komplette, fuldt funktionelle hjemmeside. Flot arbejde!

question mark

Hvorfor tilføjer vi et data-category-attribut (som data-category="Health") til hvert <article>-element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 6
some-alt