Suodatusominaisuuden Toteuttaminen
Tavoite
Viimeisenä vaiheena lisätään toiminnallisuus artikkeleiden suodattamiseen aiheen mukaan, mikä toteutetaan JavaScriptin avulla.
Mahdollinen kehotus
Voitko toteuttaa ominaisuuden, jossa artikkeleita suodatetaan aiheen mukaan HTML-painikkeiden ja JavaScriptin avulla?
Lopputulos
index.html file
- Lisätään
nav-lohkoheader-osioon, johon suodatuspainikkeet sijoitetaan; - Jokaiselle artikkelille annetaan
data-category-attribuutti ja vastaava aihearvo; - Lisätään linkki
index.js-tiedostoon ennen sulkevaabody-tägiä.
index.css file
Lisätään tyylejä, jotta suodatuspainikkeet näyttävät siisteiltä.
index.js file
Liitetään skripti, joka toteuttaa suodatuslogiikan.
Kaiken tämän ChatGPT neuvoi tekemään. Seurasimme sen ohjeita.
index.html
index.css
index.js
Verkkosivuston tila
Videotutoriaali
Tässä se on. Onnistuit. Tämä on täysin toimiva, valmis verkkosivustosi. Hienoa työtä!
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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 5Suodatusominaisuuden Toteuttaminen
Pyyhkäise näyttääksesi valikon
Tavoite
Viimeisenä vaiheena lisätään toiminnallisuus artikkeleiden suodattamiseen aiheen mukaan, mikä toteutetaan JavaScriptin avulla.
Mahdollinen kehotus
Voitko toteuttaa ominaisuuden, jossa artikkeleita suodatetaan aiheen mukaan HTML-painikkeiden ja JavaScriptin avulla?
Lopputulos
index.html file
- Lisätään
nav-lohkoheader-osioon, johon suodatuspainikkeet sijoitetaan; - Jokaiselle artikkelille annetaan
data-category-attribuutti ja vastaava aihearvo; - Lisätään linkki
index.js-tiedostoon ennen sulkevaabody-tägiä.
index.css file
Lisätään tyylejä, jotta suodatuspainikkeet näyttävät siisteiltä.
index.js file
Liitetään skripti, joka toteuttaa suodatuslogiikan.
Kaiken tämän ChatGPT neuvoi tekemään. Seurasimme sen ohjeita.
index.html
index.css
index.js
Verkkosivuston tila
Videotutoriaali
Tässä se on. Onnistuit. Tämä on täysin toimiva, valmis verkkosivustosi. Hienoa työtä!
Kiitos palautteestasi!
