Primer commit

.eslintrc

@@ -0,0 +1,31 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 6
+    },
+    "rules": {
+        "keyword-spacing": 1,
+        "space-before-function-paren": [1, "never"],
+        "eqeqeq": 1,
+        "space-infix-ops": 1,
+        "comma-spacing": 1,
+        "brace-style": 1,
+        "no-multiple-empty-lines": 1,
+        "camelcase": 1,
+        "func-call-spacing": 1,
+        "key-spacing": 1,
+        "semi": 1,
+        "no-floating-decimal": 1,
+        "no-multi-spaces": 1,
+        "object-property-newline": 1,
+        "padded-blocks": [1, "never"],
+        "space-before-blocks": 1,
+        "space-in-parens": 1,
+        "spaced-comment": 1,
+        "quotes": [1, "single"],
+        "id-length": [1, {
+            "exceptions": ["i", "j", "x"]
+        }],
+        "indent": [1, 2],
+        "no-array-constructor": 1
+    }
+}

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -1,54 +1,72 @@
-# Cardify
+# Imaginator
 
-* **Track:** _Common Core_
-* **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>`
-con el texto del atributo `alt` de la imagen.
+Plugin de Jquery que permite agregar etiquetas `<figure` y `<figcaption>` al pasar el mouse por las imagenes. La etiqueta `<figcaption>`, mostrará el texto del atributo Alt.
 
-## Flujo de trabajo
+- - -
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+## Instalación
+### Global (navegador)
 
-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í:
+`<script src="jquery.imaginator.js"></script>`
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/cardify.git
-   ```
+### Uso
 
-3. Cuando hayas terminado tu producto, envía un Pull Request a la rama que tus
-   instructorxs este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
+`$(content).imaginator();
+`
 
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` :smiley:.
+## Funcionamiento
+1. ####  Inicializar el proyecto con el comando:
+                                            npm init
 
-***
+2. ####  Descargar Imaginator con el comando:
+                                     npm install imaginator
+
+3. #### Enlazar script a Documento html.
+`                       <script>jquery.imaginator.js</script>`
 
-## Instalación
+4. #### Pegar el siguiente código en el documento JS principal:
 
-### Global (navegador)
+                              var imaginator = require('imaginator');
+
+5. #### Colocar las imagenes dentro de un contenedor con class "content", las imagenes deben incluir el atributo alt con alguna descripción de la imagen.
+
+                             <div class="content">
+                               <div class="imagenes">
+                                 <img src="corgi.jpg" alt="Corgi"/>
+                               </div>
+                             </div.
+
+
+6. #### Comienza a utilizar el Plugin.
+
+## Ejemplo
+
+![](https://media.giphy.com/media/xThtacKxgD3QBRdMLm/giphy.gif).
+
+## Herramientas de Producción
+- JQuery ~v. 3.2.1
+
+## Dependencias de Desarrollo
+- Mocha ^ 5.0.0
+- Chai ^ 4.1.2
+- ESlint ~v 4.16.0
+- Jsdom ^11.6.1
+
+
+	Autor: Teresita Cañete,
+           Ariella Rodríguez.
+           Enero,2018.
+    Licencia: ISC License.
+
 
-```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
 
-...

assets/js/index.js

@@ -0,0 +1,66 @@
+const $ = require('jquery');
+
+$(document).ready(function() {
+  // Llamando plugin
+  $('.content').imaginator();
+});
+
+(function($) {
+  $.fn.imaginator = function() {
+    $('.content img').mouseover(function() {
+      let imagenFigure = $(this).attr('alt');
+      $(this).each(function() {
+        $(this).wrap('<figure></figure>');
+        $('figure').css({
+          'display': 'inline-block',
+          'border': '3px solid #eee',
+          'width': '250px',
+          'margin': '30px',
+          'z-index': '10',
+        }); 
+
+        $('content').css({
+          'float': 'left',
+          'width': '30%',
+        });
+
+        $(this).css({
+          'filter': 'brightness(0.4)',
+        });
+
+        $('figure').append('<figcaption>' + imagenFigure + '</figcaption>');
+        $('figcaption').css({
+          'text-align': 'center',
+          'font-size': '30px',
+          'padding': '5px 10px',
+          'border-radius': '2px',
+          'display': 'inline-block',
+          'background': '#000',
+          'color': '#fff',
+          'width': '91%', });
+      });
+    });
+
+    $('.content img').mouseout(function() {
+      $('figcaption').unwrap();
+      $('img').css({
+        'filter': 'brightness(1)',
+      });
+      $('figcaption').remove();
+    });
+  };
+})($);
+
+
+// Tests
+
+const checkAlt = function() {
+  var alt = $('.img-item').attr('alt');
+  if (alt === '') {
+    // alert('Debe agregar atributo alt');
+  } else {
+    // alert('Atributo alt ok');
+  }
+};
+
+module.exports = checkAlt;

index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Imaginator</title>
+
+</head>
+
+<body>
+  <!--Div contenedor de imagenes-->
+  <div class="content">
+    <div class="imagenes">
+      <img src="assets/images/corgi.jpg" width="250px" height="250px" alt="Raza: Corgi" />
+      <img src="assets/images/pastorA.jpeg" width="250px" height="250px" alt=" Raza: Pastor Alemán" />
+      <img src="assets/images/Labrador.jpeg" width="250px" height="250px" alt="Raza: Labrador" />
+    </div>
+  </div>
+  <!--Scripts-->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <script type="text/javascript" src="assets/js/index.js"></script>
+</body>
+</html>
+
+