Implementering av Filtreringsfunksjonalitet
Mål
Til slutt er det siste steget å legge til funksjonalitet for å filtrere artiklene etter tema, noe som vil bli implementert med JavaScript.
Mulig prompt
Kan du implementere funksjonen for å filtrere artikler etter tema ved hjelp av HTML-knapper og JavaScript?
Resultat
index.html file
- Vi legger til en
nav-blokk iheaderhvor filtreringsknappene våre skal plasseres; - Vi gir hver artikkel attributtet
data-categoryog tilhørende tema-verdi; - Vi legger til lenken til
index.js-filen før den avsluttendebody-taggen.
index.css file
Vi legger til noen stiler for å gjøre filtreringsknappene pene.
index.js file
Vi limer inn skriptet som implementerer filtreringslogikken.
Alt dette ba ChatGPT oss om å gjøre. Vi fulgte instruksjonene.
index.html
index.css
index.js
Nettstedstilstand
Videoveiledning
Her er det. Du klarte det. Dette er ditt komplette, fullt funksjonelle nettsted. Flott arbeid!
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain how the filtering functionality works in more detail?
What should I do if the filter buttons are not working as expected?
Can I add more categories or customize the filter buttons?
Awesome!
Completion rate improved to 5Implementering av Filtreringsfunksjonalitet
Sveip for å vise menyen
Mål
Til slutt er det siste steget å legge til funksjonalitet for å filtrere artiklene etter tema, noe som vil bli implementert med JavaScript.
Mulig prompt
Kan du implementere funksjonen for å filtrere artikler etter tema ved hjelp av HTML-knapper og JavaScript?
Resultat
index.html file
- Vi legger til en
nav-blokk iheaderhvor filtreringsknappene våre skal plasseres; - Vi gir hver artikkel attributtet
data-categoryog tilhørende tema-verdi; - Vi legger til lenken til
index.js-filen før den avsluttendebody-taggen.
index.css file
Vi legger til noen stiler for å gjøre filtreringsknappene pene.
index.js file
Vi limer inn skriptet som implementerer filtreringslogikken.
Alt dette ba ChatGPT oss om å gjøre. Vi fulgte instruksjonene.
index.html
index.css
index.js
Nettstedstilstand
Videoveiledning
Her er det. Du klarte det. Dette er ditt komplette, fullt funksjonelle nettsted. Flott arbeid!
Takk for tilbakemeldingene dine!
