diff --git a/README.md b/README.md index 5bdda8e9..52e8273a 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,29 @@ # Cardify -* **Track:** _Common Core_ +* **Track:** _Front-end especialización_ * **Curso:** _JS Deep Dive: Crea tu propia librería usando JavaScript_ * **Unidad:** _Producto final_ *** -Implementar un plugin de jQuery que dado un _contenedor_ debe buscar todas las -imágenes que encuentre dentro del _contenedor_ y reemplazarlas por un nuevo -elemento `
` que contenga la imagen (``) además de un `
` +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 `
` que contenga la imagen (``) además de un `
` 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**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) +1. Debes realizar un [**fork**](https://github.com/Jonhks/cardify.git) de este repositorio. 2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar @@ -23,8 +33,7 @@ con el texto del atributo `alt` de la imagen. git clone https://github.com//cardify.git ``` -3. Cuando hayas terminado tu producto, envía un Pull Request a la rama que tus - instructorxs este repositorio +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 @@ -32,23 +41,4 @@ con el texto del atributo `alt` de la imagen. *** -## Instalación - -### Global (navegador) - -```html - - -``` - -## Uso - -```js -// `container` es el selector del contenedor donde se buscarán todas las -// imágenes a ser procesadas. -$(container).cardify({}); -``` - -## Ejemplos -... diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..8b77852a --- /dev/null +++ b/css/main.css @@ -0,0 +1,9 @@ +img{ + margin-left: 100px; + width: 800px; + height: 500px;; +} + +figure{ + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..7164a73c --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + Cardify Example + + + + + + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 00000000..2d759a4f --- /dev/null +++ b/js/app.js @@ -0,0 +1,121 @@ + +// loadPage = () => { +// const containerGallery = document.getElementById("gallery"); +// const arrayOfImage = Array.from(containerGallery.getElementsByTagName("img")); +// const data = getData(arrayOfImage); +// removeImage(arrayOfImage, containerGallery); +// createElements(data, containerGallery); +// } + +// getData = arrayOfImage => { +// const newData = arrayOfImage.map(item =>{ +// let altImg = item.alt; +// // console.log(altImg); +// let srcImag = item.src; +// // console.log(srcImag); +// const obj = { +// src : srcImag, +// alt : altImg +// } +// // console.log(obj); +// return obj; +// }) +// // console.log(newData); +// return newData; +// } + +// removeImage = (arrayOfIamge, containerGallery) => { +// arrayOfIamge.forEach(item =>{ +// // console.log(item); +// containerGallery.removeChild(item); +// }); +// // } + +// // createElements = (data, containerGallery) => { +// // data.forEach(item => { +// // const figure = document.createElement("figure"); +// // const figcapture = document.createElement("figcaption"); +// // const img = document.createElement("img"); + +// // img.src = item.src; +// // figcapture.innerText = item.alt; + +// // figure.appendChild(img); +// // figure.appendChild(figcapture); +// // containerGallery.appendChild(figure); +// // console.log(figure) +// // }); + + +// createElements = (data, containerGallery) => { +// let output = ''; +// data.forEach(item =>{ +// output += ` +//
+// +// ${item.alt} +//
` +// }) +// console.log(output); +// containerGallery.innerHTML= output; +// } + + +// } +// loadPage(); + + + +// // ---------------------------------------Es5---------------------------------------- + + + +function loadPage () { + var containerGallery = document.getElementById("gallery"); + var arrayOfIamge = Array.from(containerGallery.getElementsByTagName("img")); + var data = getData(arrayOfIamge); + removeImage(arrayOfIamge, containerGallery); + createNewImages(data, containerGallery) + console.log(data); +} + + +function getData (arrayOfIamge) { + var newData = arrayOfIamge.map(function(item){ + var altImg = item.alt; + var srcImag = item.src; + var obj = { + src : srcImag, + alt : altImg + } + // console.log(obj); + return obj; + }) + // console.log(newData); + return newData; +} + +function removeImage (arrayOfIamge, containerGallery) { + arrayOfIamge.forEach(function(item){ + containerGallery.removeChild(item); + }) +} + +function createNewImages (data, containerGallery) { + data.forEach(function(item){ + var figure = document.createElement("figure"); + var img = document.createElement("img"); + var figcaption = document.createElement("figcaption"); + + img.src = item.src; + figcaption.innerText = item.alt; + + figure.appendChild(img); + figure.appendChild(figcaption); + containerGallery.appendChild(figure); + console.log(figure) + }) +} + + +loadPage(); \ No newline at end of file