Laboratoria-learning · Jonhks · Feb 24, 2018 · Feb 24, 2018 · Feb 27, 2018 · Mar 1, 2018
diff --git 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 `<figure>` que contenga la imagen (`<img>`) además de un `<figcaption>`
+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**](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,32 +33,12 @@ con el texto del atributo `alt` de la imagen.
    git clone https://github.com/<nombre-de-usuario>/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
 > archivo `README.md` :smiley:.
 
 ***
 
-## Instalación
-
-### Global (navegador)
-
-```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="path-to-cardify.js"></script>
-```
-
-## 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
@@ -0,0 +1,9 @@
+img{
+  margin-left: 100px;
+  width: 800px;
+  height: 500px;;
+}
+
+figure{
+  text-align: center;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="css/main.css">
+	<title>Cardify Example</title>
+
+</head>
+<body>
+    <section id="gallery" class="gallery">
+      <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=2250&q=80" alt="Pietro De Grandi - Pragser Wildsee, Italy" />
+      <img src="https://images.unsplash.com/photo-1476610182048-b716b8518aae?auto=format&fit=crop&w=2327&q=80" alt="Robert Lukeman - Seljalandsfoss Waterfall, Iceland" />
+      <img src="https://images.unsplash.com/photo-1439853949127-fa647821eba0?auto=format&fit=crop&w=934&q=80" alt="Daniel Roe - Lake Louise, Canada" />
+      <img src="https://images.unsplash.com/photo-1495312040802-a929cd14a6ab?auto=format&fit=crop&w=2389&q=80" alt="Billy Williams - Messina, Italy" />
+      <img src="https://images.unsplash.com/photo-1504217051514-96afa06398be?auto=format&fit=crop&w=2434&q=80" alt="Jonatan Pie - Goðaland, Iceland" />
+      <img src="https://images.unsplash.com/photo-1445452916036-9022dfd33aa8?auto=format&fit=crop&w=2553&q=80" alt="Michał Parzuchowski - Wysokie Tatry, Vysoké Tatry, Slovakia" />
+      <img src="https://images.unsplash.com/photo-1501791330673-603715379ded?auto=format&fit=crop&w=2550&q=80" alt="Irene Dávila - Bannwaldsee, Schwangau, Germany" />
+      <img src="https://images.unsplash.com/photo-1502219778817-93d41333bd19?auto=format&fit=crop&w=2550&q=80" alt="Eric Carlson - Patagonia" />
+      <img src="https://images.unsplash.com/photo-1445217143695-467124038776?auto=format&fit=crop&w=2333&q=80" alt="Sergei Akulich - Diablo Lake, United States" />
+    </section>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="js/app.js"></script>
+</body>
+</html>
diff --git 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 += `
+//       <figure>
+//         <img src = '${item.src}'>
+//         <figcapture>${item.alt}</figcapture>
+//       </figure>`
+//     })
+//     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();