Este es un código JavaScript para una aplicación web que muestra una lista de tarjetas y permite al usuario filtrar las tarjetas por categoría. El código importa una matriz de tarjetas desde un archivo data.js, que se usa para mostrar las tarjetas en la página web.
El código define dos funciones, printList e printCards. La función printList es responsable de crear una lista de botones de categoría que se muestran en la parte superior de la página. La función printCards toma un elemento contenedor y una matriz de objetos de tarjeta y agrega código HTML al elemento contenedor para mostrar las tarjetas.
El detector de eventos DOMContentLoaded se usa para llamar a las funciones printList e printCards una vez que el contenido HTML se ha cargado en el navegador. El detector de eventos de clic se utiliza para escuchar los clics en los botones de categoría y en las imágenes de la tarjeta, y para responder adecuadamente.
Cuando se hace clic en un botón de categoría, se llama a la función printCards con el filtro apropiado para mostrar solo las tarjetas en esa categoría. Cuando se hace clic en la imagen o en el titulo de una tarjeta, el índice de la tarjeta seleccionada se almacena en el objeto sessionStorage y se redirige al usuario a una página de detalles. La instrucción console.log al final se utiliza con fines de depuración.
el código details.js es para una página separada que muestra detalles sobre un elemento seleccionado de una lista de elementos. Primero recupera la identificación del elemento seleccionado del almacenamiento de la sesión y luego encuentra el objeto del elemento correspondiente en la matriz de tarjetas. Luego muestra los detalles del elemento junto con un video incrustado en un elemento de figura.
El código también genera HTML para mostrar los elementos restantes en la matriz de tarjetas en un formato de lista, excluyendo el elemento seleccionado. Luego, este HTML se agrega a un elemento contenedor con el ID "videos-container". Al hacer click sobre el logo de figma se dirije a la página principal.
En cuanto a la hoja de estilo CSS que agrega el diseño y la apariencia de una página HTML. Comienza importando la fuente "Open Sans" de Google Fonts. Luego establece algunos estilos globales para todos los elementos de la página, como márgenes, relleno y color de fondo.
La sección de encabezado de la página tiene un estilo con una barra de navegación y una lista de botones, usando flexbox para alinear los elementos. Los botones tienen un color de fondo y un borde, y cambian de color al pasar el mouse por encima.
El contenido principal de la página está diseñado con tarjetas que muestran imágenes, texto y videos. Las tarjetas se organizan utilizando flexbox con un espacio entre ellas y se envuelven para adaptarse al espacio disponible. Los detalles de la tarjeta incluyen una imagen en miniatura, una imagen de usuario y texto, con la imagen de usuario y el texto alineados a la izquierda.
La hoja de estilo también incluye una consulta de medios que ajusta el diseño para tamaños de pantalla entre 480 px y 1600 px, cambiando la visualización de la tarjeta a una sola columna con contenido centrado. Finalmente, está el estilo del pie de página, incluida una imagen, la cual dirije a un formulario.
workshop3 Angie Moreno
url
Descripción del proyecto
carpetas
Resumen de paso a paso y desarrollo
Este es un código JavaScript para una aplicación web que muestra una lista de tarjetas y permite al usuario filtrar las tarjetas por categoría. El código importa una matriz de tarjetas desde un archivo data.js, que se usa para mostrar las tarjetas en la página web. El código define dos funciones, printList e printCards. La función printList es responsable de crear una lista de botones de categoría que se muestran en la parte superior de la página. La función printCards toma un elemento contenedor y una matriz de objetos de tarjeta y agrega código HTML al elemento contenedor para mostrar las tarjetas.
El detector de eventos DOMContentLoaded se usa para llamar a las funciones printList e printCards una vez que el contenido HTML se ha cargado en el navegador. El detector de eventos de clic se utiliza para escuchar los clics en los botones de categoría y en las imágenes de la tarjeta, y para responder adecuadamente.
Cuando se hace clic en un botón de categoría, se llama a la función printCards con el filtro apropiado para mostrar solo las tarjetas en esa categoría. Cuando se hace clic en la imagen o en el titulo de una tarjeta, el índice de la tarjeta seleccionada se almacena en el objeto sessionStorage y se redirige al usuario a una página de detalles. La instrucción console.log al final se utiliza con fines de depuración. el código details.js es para una página separada que muestra detalles sobre un elemento seleccionado de una lista de elementos. Primero recupera la identificación del elemento seleccionado del almacenamiento de la sesión y luego encuentra el objeto del elemento correspondiente en la matriz de tarjetas. Luego muestra los detalles del elemento junto con un video incrustado en un elemento de figura. El código también genera HTML para mostrar los elementos restantes en la matriz de tarjetas en un formato de lista, excluyendo el elemento seleccionado. Luego, este HTML se agrega a un elemento contenedor con el ID "videos-container". Al hacer click sobre el logo de figma se dirije a la página principal. En cuanto a la hoja de estilo CSS que agrega el diseño y la apariencia de una página HTML. Comienza importando la fuente "Open Sans" de Google Fonts. Luego establece algunos estilos globales para todos los elementos de la página, como márgenes, relleno y color de fondo. La sección de encabezado de la página tiene un estilo con una barra de navegación y una lista de botones, usando flexbox para alinear los elementos. Los botones tienen un color de fondo y un borde, y cambian de color al pasar el mouse por encima. El contenido principal de la página está diseñado con tarjetas que muestran imágenes, texto y videos. Las tarjetas se organizan utilizando flexbox con un espacio entre ellas y se envuelven para adaptarse al espacio disponible. Los detalles de la tarjeta incluyen una imagen en miniatura, una imagen de usuario y texto, con la imagen de usuario y el texto alineados a la izquierda. La hoja de estilo también incluye una consulta de medios que ajusta el diseño para tamaños de pantalla entre 480 px y 1600 px, cambiando la visualización de la tarjeta a una sola columna con contenido centrado. Finalmente, está el estilo del pie de página, incluida una imagen, la cual dirije a un formulario.
vistas
waka-time
https://wakatime.com/@5faf680b-d943-42ab-9f52-7448215be18c/projects/eiatgdvdfk?start=2023-03-15&end=2023-03-21