From e4500ad8be2abc5f966567df684617d1696862c5 Mon Sep 17 00:00:00 2001 From: Jonh Date: Sat, 24 Feb 2018 14:07:41 -0600 Subject: [PATCH 1/5] Subeindo cambios --- README.md | 42 ++++++++++++++++-------------------------- css/main.css | 5 +++++ index.html | 25 +++++++++++++++++++++++++ js/app.js | 1 + 4 files changed, 47 insertions(+), 26 deletions(-) create mode 100644 css/main.css create mode 100644 index.html create mode 100644 js/app.js diff --git a/README.md b/README.md index 5bdda8e9..d5e0a81e 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..424e45e9 --- /dev/null +++ b/css/main.css @@ -0,0 +1,5 @@ +* { margin: 0; padding: 0; } +.gallery { max-width: 90%; margin: 30px auto; display: flex; flex-flow: column wrap; max-height: 1000px; } +.gallery img { width: 25%; } +.cardify-figure { background: #333; color: #fff; +} \ 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..922d8a7c --- /dev/null +++ b/js/app.js @@ -0,0 +1 @@ +Escribe tu código aqui---- \ No newline at end of file From 2bd74b2b80babce9c66f1fb35d38cf33c2c03493 Mon Sep 17 00:00:00 2001 From: Jonh Date: Sat, 24 Feb 2018 14:10:42 -0600 Subject: [PATCH 2/5] Subeindo cambios v2 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d5e0a81e..4afed301 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ const obteniendoElElemento = document.getElementById("miId") const nombreDeTuFuncion = => (obteniendoElElemento){ Inicia tu proyecto... } - +``` ## Flujo de trabajo From 2a66227738fb33f4102f13d4935ac47ae7e270e2 Mon Sep 17 00:00:00 2001 From: Jonh Date: Mon, 26 Feb 2018 18:25:05 -0600 Subject: [PATCH 3/5] Cambio en readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4afed301..52e8273a 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Ejemplo const obteniendoElElemento = document.getElementById("miId") -const nombreDeTuFuncion = => (obteniendoElElemento){ +const nombreDeTuFuncion =(obteniendoElElemento) => { Inicia tu proyecto... } ``` From 3568872c646d3248a553e700fb5b949369a4529e Mon Sep 17 00:00:00 2001 From: Jonh Date: Thu, 1 Mar 2018 13:41:29 -0600 Subject: [PATCH 4/5] actualizando repo --- css/main.css | 12 ++++++++---- js/app.js | 1 - 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index 424e45e9..8b77852a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,5 +1,9 @@ -* { margin: 0; padding: 0; } -.gallery { max-width: 90%; margin: 30px auto; display: flex; flex-flow: column wrap; max-height: 1000px; } -.gallery img { width: 25%; } -.cardify-figure { background: #333; color: #fff; +img{ + margin-left: 100px; + width: 800px; + height: 500px;; +} + +figure{ + text-align: center; } \ No newline at end of file diff --git a/js/app.js b/js/app.js index 922d8a7c..e69de29b 100644 --- a/js/app.js +++ b/js/app.js @@ -1 +0,0 @@ -Escribe tu código aqui---- \ No newline at end of file From aa2d027f8c32871d368af97a35f424b185eda70a Mon Sep 17 00:00:00 2001 From: Jonh Date: Thu, 1 Mar 2018 13:43:35 -0600 Subject: [PATCH 5/5] subierndo solucion completa --- js/app.js | 121 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) diff --git a/js/app.js b/js/app.js index e69de29b..2d759a4f 100644 --- a/js/app.js +++ 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