/cardify

Primary LanguageHTML

Cardify

  • Track: Front-end especialización
  • Curso: JS Deep Dive: Crea tu propia librería usando JavaScript
  • Unidad: Producto final

Implementar una funcion de Javascript EcmaScript 6 que dado un contenedor debe buscar todas las imágenes que encuentre dentro del contenedor y reemplazarlas por un nuevo elemento <figure> que contenga la imagen (<img>) además de un <figcaption> con el texto del atributo alt de la imagen.

Para cumplir con el objetivo del proyecto deberas obtener el elemento con (id = "gallery") y pasarlo como parametro a la funcion principal

Ejemplo

const obteniendoElElemento = document.getElementById("miId")

const nombreDeTuFuncion =(obteniendoElElemento) => {
  Inicia tu proyecto...
}

Flujo de trabajo

  1. Debes realizar un fork de este repositorio.

  2. Luego deberás clonar tu fork en tu máquina. Recuerda que el comando a usar es git clone y su estructura normalmente se ve así:

    git clone https://github.com/<nombre-de-usuario>/cardify.git

  3. Crea tu propia rama y cuando tu producto esté terminado, sube tus cambios a la rama que creaste de ese repositorio y haz un pull request a tu propio master (puedes solicitar apoyo de tus profes para este paso).

Nota: No olvides que es una buena práctica describir tu proyecto en este archivo README.md 😃.

Mi readme

Investigación sobre figure y figcaption.

  • FIGURE: La etiqueta

    especifica contenido autónomo, como ilustraciones, diagramas, fotos, listas de códigos, etc. Si bien el contenido del elemento está relacionado con el flujo principal, su posición es independiente del flujo principal, y si se elimina, no debería afectar el flujo del documento.

  • FIGCAPTION: El elemento figcaption representa un título o leyenda de un fragmento de contenido (figure). Un elemento figure representa a un trozo de documento autocontenido que se usa habitualmente para encerrar imágenes, gráficos, tablas de referencia, videos, poemas, fragmentos de código, etc.

  • Ejemplo de uso de ambas etiquetas:

Pietro De Grandi - Pragser Wildsee, Italy

"Pietro De Grandi - Pragser Wildsee, Italy"

Pseudocódigo.

  1. Traer el elemento que contiene todas las imágenes, por su id que es "gallery"
  2. Declarar funcion y aplicarle al elemento contenedor, el metodo de array from para acceder a sus indices, que son las imágenes.
  3. Acceder a los atributos que necesitamos de cada indice, en este caso el alt y el src
  4. Concatenar por medio de un template los atributos obtenidos con las etiquetas figure y figcaption
  5. Aplicar metodo para reemplazar las etiquetas originales por el nuevo template