Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Implementering av Filtreringsfunktionalitet | Bygga Bloggwebbplatsen
Grundläggande AI-Driven Webbutveckling

bookImplementering av Filtreringsfunktionalitet

Mål

Slutligen är det sista steget att lägga till funktionalitet för att filtrera artiklar efter ämne, vilket kommer att implementeras med JavaScript.

Möjlig uppgift

Kan du implementera funktionen att filtrera artiklar efter ämne med hjälp av HTML-knappar och JavaScript?

Resultat

index.html file

  • Vi lägger till ett nav-block i header där våra filtreringsknappar placeras;
  • Vi förser varje artikel med attributet data-category och motsvarande ämnesvärde;
  • Vi lägger till länken till index.js-filen före den avslutande body-taggen.

index.css file
Vi lägger till några stilar för att göra filtreringsknapparna snygga.

index.js file
Vi klistrar in skriptet som implementerar filtreringslogiken.

Allt detta har ChaGPT instruerat oss att göra. Vi följde dess instruktioner.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Webbplatsens tillstånd

Videohandledning

Här har du det. Du klarade det. Detta är din kompletta, fullt fungerande webbplats. Bra jobbat!

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 5

bookImplementering av Filtreringsfunktionalitet

Svep för att visa menyn

Mål

Slutligen är det sista steget att lägga till funktionalitet för att filtrera artiklar efter ämne, vilket kommer att implementeras med JavaScript.

Möjlig uppgift

Kan du implementera funktionen att filtrera artiklar efter ämne med hjälp av HTML-knappar och JavaScript?

Resultat

index.html file

  • Vi lägger till ett nav-block i header där våra filtreringsknappar placeras;
  • Vi förser varje artikel med attributet data-category och motsvarande ämnesvärde;
  • Vi lägger till länken till index.js-filen före den avslutande body-taggen.

index.css file
Vi lägger till några stilar för att göra filtreringsknapparna snygga.

index.js file
Vi klistrar in skriptet som implementerar filtreringslogiken.

Allt detta har ChaGPT instruerat oss att göra. Vi följde dess instruktioner.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Webbplatsens tillstånd

Videohandledning

Här har du det. Du klarade det. Detta är din kompletta, fullt fungerande webbplats. Bra jobbat!

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6
some-alt