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
Webbutveckling med ChatGPT

bookImplementering av filtreringsfunktionalitet

Mål

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

Möjlig prompt

Kan du implementera funktionen för 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 tilldelar varje artikel 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 instruerade ChaGPT 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 är det. Du klarade det. Detta är din kompletta, fullt fungerande webbplats. Bra jobbat!

question mark

Varför lägger vi till ett data-category attribut (som data-category="Health") till varje <article> element?

Select the correct answer

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

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

Möjlig prompt

Kan du implementera funktionen för 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 tilldelar varje artikel 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 instruerade ChaGPT 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 är det. Du klarade det. Detta är din kompletta, fullt fungerande webbplats. Bra jobbat!

question mark

Varför lägger vi till ett data-category attribut (som data-category="Health") till varje <article> element?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6
some-alt