Funcionalidad de Filtrado
Objetivo
Por último, pero no menos importante, el paso final es agregar funcionalidad para filtrar los artículos por tema, lo cual se implementará usando JavaScript.
Posible Solicitud
¿Puedes implementar la función de filtrar artículos por tema usando botones HTML y JavaScript?
Resultado
archivo index.html
- Añadimos un bloque
nav
alheader
donde se colocarán nuestros botones de filtrado; - Proporcionamos a cada artículo el atributo
data-category
y el valor correspondiente al tema; - Añadimos el enlace al archivo
index.js
antes de la etiqueta de cierrebody
.
archivo index.css
Añadimos algunos estilos para que los botones de filtrado se vean bonitos.
archivo index.js
Pegamos el script que implementa la lógica de filtrado.
Todo esto nos lo dijo ChaGPT. Seguimos sus instrucciones.
index.html
index.css
index.js
Estado del Sitio Web
Tutorial en Video
Aquí tienes. Lo lograste. Este es tu sitio web completo y totalmente funcional. ¡Buen trabajo!
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Pregunte me preguntas sobre este tema
Resumir este capítulo
Mostrar ejemplos del mundo real
Awesome!
Completion rate improved to 5
Funcionalidad de Filtrado
Desliza para mostrar el menú
Objetivo
Por último, pero no menos importante, el paso final es agregar funcionalidad para filtrar los artículos por tema, lo cual se implementará usando JavaScript.
Posible Solicitud
¿Puedes implementar la función de filtrar artículos por tema usando botones HTML y JavaScript?
Resultado
archivo index.html
- Añadimos un bloque
nav
alheader
donde se colocarán nuestros botones de filtrado; - Proporcionamos a cada artículo el atributo
data-category
y el valor correspondiente al tema; - Añadimos el enlace al archivo
index.js
antes de la etiqueta de cierrebody
.
archivo index.css
Añadimos algunos estilos para que los botones de filtrado se vean bonitos.
archivo index.js
Pegamos el script que implementa la lógica de filtrado.
Todo esto nos lo dijo ChaGPT. Seguimos sus instrucciones.
index.html
index.css
index.js
Estado del Sitio Web
Tutorial en Video
Aquí tienes. Lo lograste. Este es tu sitio web completo y totalmente funcional. ¡Buen trabajo!
¡Gracias por tus comentarios!