Mise en Œuvre de la Fonctionnalité de Filtrage
Objectif
Enfin, la dernière étape consiste à ajouter une fonctionnalité permettant de filtrer les articles par sujet, qui sera implémentée à l'aide de JavaScript.
Invite possible
Pouvez-vous implémenter la fonctionnalité de filtrage des articles par sujet en utilisant des boutons HTML et JavaScript ?
Résultat
Fichier index.html
- Ajout d’un bloc
navdans l’headerpour placer les boutons de filtrage ; - Attribution à chaque article de l’attribut
data-categoryavec la valeur du sujet correspondant ; - Ajout du lien vers le fichier
index.jsavant la balise de fermeturebody.
Fichier index.css
Ajout de quelques styles pour améliorer l’apparence des boutons de filtrage.
Fichier index.js
Insertion du script qui implémente la logique de filtrage.
Toutes ces étapes ont été recommandées par ChatGPT. Nous avons suivi ses instructions.
index.html
index.css
index.js
État du site web
Tutoriel vidéo
Voilà. Vous avez réussi. Voici votre site web complet et entièrement fonctionnel. Excellent travail !
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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 5Mise en Œuvre de la Fonctionnalité de Filtrage
Glissez pour afficher le menu
Objectif
Enfin, la dernière étape consiste à ajouter une fonctionnalité permettant de filtrer les articles par sujet, qui sera implémentée à l'aide de JavaScript.
Invite possible
Pouvez-vous implémenter la fonctionnalité de filtrage des articles par sujet en utilisant des boutons HTML et JavaScript ?
Résultat
Fichier index.html
- Ajout d’un bloc
navdans l’headerpour placer les boutons de filtrage ; - Attribution à chaque article de l’attribut
data-categoryavec la valeur du sujet correspondant ; - Ajout du lien vers le fichier
index.jsavant la balise de fermeturebody.
Fichier index.css
Ajout de quelques styles pour améliorer l’apparence des boutons de filtrage.
Fichier index.js
Insertion du script qui implémente la logique de filtrage.
Toutes ces étapes ont été recommandées par ChatGPT. Nous avons suivi ses instructions.
index.html
index.css
index.js
État du site web
Tutoriel vidéo
Voilà. Vous avez réussi. Voici votre site web complet et entièrement fonctionnel. Excellent travail !
Merci pour vos commentaires !
