Se puede ver la charla en algún lado?🫶🏼

Finalmente, una vez que tengo todos los elementos creados, los uno utilizando appendChild para que la estructura HTML tenga sentido y todo encaje correctamente.
#WebDev #JavaScript #FrontEnd

El contenido de cada card lo agrego accediendo a las propiedades del array de posts (usando el nombre de la propiedad como clave) y lo añado con textContent.
#WebDev #JavaScript #FrontEnd

Con un bucle forEach recorro los posts y genero los elementos necesarios. Con createElement creo los elementos (como div, article, p) y les añado clases con classList.add para aplicar estilos. Además, no olvido incluir los atributos aria necesarios usando setAttribute.
#WebDev #JavaScript #FrontEnd

Y esto es lo que hice para poder filtrar los posts, otro día cuento como cree las cards dinámicamente.
Ahora me voy a tomar un café y a rezar para que no se rompa nada🥲

Con URLSearchParams, leo el parámetro de la URL y filtro los posts para mostrar solo los que coincidan con la categoría seleccionada.
#FrontEndDeveloper #WebDevelopment #JavaScript

Al hacer clic en un filtro, la URL se actualiza para incluir el parámetro category correspondiente, permitiendo que la página se filtre dinámicamente según la categoría seleccionada.
#FrontEndDeveloper #WebDevelopment #javascript

Llamo a todos los botones en el script y les paso una función que itera por cada uno de ellos para que aplique el atributo aria-pressed en true o false según sea su estado.
#FrontEndDeveloper #WebDevelopment #JavaScript

Para permitir que los usuarios filtren los posts por categoría, utilicé botones con data-category que representan cada categoría. Además cada botón activa un filtro visual y de accesibilidad utilizando aria-pressed para indicar qué categoría está seleccionada.
#FrontEndDeveloper

Para gestionar los artículos del blog, utilizo un array de objetos en JS. Así se ve 👇
#FrontEndDeveloper #JavaScript #WebDevelopment

Iré contando poco a poco que he hecho y cómo así de paso refresco la memoría y me sirve de repaso. Hoy voy con los filtros por categoría.
#FrontEnd #JavaScript #Webdevelopment