Implementering av Filtreringsfunksjonalitet
Mål
Til slutt skal funksjonalitet for å filtrere artikler etter emne legges til, og dette vil bli implementert med JavaScript.
Mulig prompt
Kan du implementere funksjonen for å filtrere artikler etter emne ved hjelp av HTML-knapper og JavaScript?
Resultat
index.html-fil
- Vi legger til en
nav-blokk iheaderhvor filtreringsknappene våre skal plasseres; - Vi gir hver artikkel attributtet
data-categoryog tilsvarende emneverdi; - Vi legger til lenken til
index.js-filen før den avsluttendebody-taggen.
index.css-fil
Vi legger til noen stiler for å gjøre filtreringsknappene pene.
index.js-fil
Vi limer inn skriptet som implementerer filtreringslogikken.
Alt dette ba ChaGPT oss om å gjøre. Vi fulgte instruksjonene.
index.html
index.css
index.js
Nettstedets tilstand
Videoveiledning
Her er det. Du har klart 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 skal funksjonalitet for å filtrere artikler etter emne legges til, og dette vil bli implementert med JavaScript.
Mulig prompt
Kan du implementere funksjonen for å filtrere artikler etter emne ved hjelp av HTML-knapper og JavaScript?
Resultat
index.html-fil
- Vi legger til en
nav-blokk iheaderhvor filtreringsknappene våre skal plasseres; - Vi gir hver artikkel attributtet
data-categoryog tilsvarende emneverdi; - Vi legger til lenken til
index.js-filen før den avsluttendebody-taggen.
index.css-fil
Vi legger til noen stiler for å gjøre filtreringsknappene pene.
index.js-fil
Vi limer inn skriptet som implementerer filtreringslogikken.
Alt dette ba ChaGPT oss om å gjøre. Vi fulgte instruksjonene.
index.html
index.css
index.js
Nettstedets tilstand
Videoveiledning
Her er det. Du har klart det. Dette er ditt komplette, fullt funksjonelle nettsted. Flott arbeid!
Takk for tilbakemeldingene dine!
