Github Badges

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "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,3 @@
+.DS_Store
+Thumbs.db
+node_modules

README.md

@@ -1,54 +1,50 @@
-# Cardify
+[![GitHub issue age](https://img.shields.io/badge/created-January%202018-31C285.svg)](https://github.com/meliveloz/cardify) ![licence](https://img.shields.io/badge/license-ISC-1F618D.svg) [![npm](https://img.shields.io/badge/npm-v8.9.0-orange.svg)]() ![npm](https://img.shields.io/badge/author-melivalvane-C0225C.svg)
 
-* **Track:** _Common Core_
-* **Curso:** _JS Deep Dive: Crea tu propia librería usando JavaScript_
-* **Unidad:** _Producto final_
+# Cardify
 
+***
+Es un plugin de jQuery para Bootstrap que permite que tus imágenes almacenadas dentro de un contenedor sean envueltas por un nuevo elemento `<figure>` que a su vez posee un `<figcaption>` con el texto del atributo `alt` de la imagen.
+Además al pasar el mouse sobre la imagen lograremos ver el contenido del 
+`<figcaption>`.
 ***
 
-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.
-
-## Flujo de trabajo
+### Requerimientos Técnicos
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+El proyecto fue realizado con las siguientes dependencias NPM:
 
-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í:
+##### Dependencias de Producción
+  - JQuery ~v. 3.2.1
+  - Bootstrap ~v. 3.3.7
+  - Jsdom ^11.6.1
+  - Browserify ^15.2.0
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/cardify.git
-   ```
+##### Dependencias de Desarrollo
+  - Chai ^ 4.1.2
+  - Mocha ^ 5.0.0
+  - Browserify ^ 15.2.0 
 
-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).
+### Uso
 
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` :smiley:.
++ Debes usar class = 'cardify' en el elemento que contiene las imagenes.
++ Recuerda usar la class de bootstrap class='img-responsive' en tus imagenes.
++ Debes incluir el atributo alt en tus imagenes con el texto que desees.
 
-***
+![](assets/img/explainreadme.png)
 
-## Instalación
+```
+  `Por último añade este CDN en tu html.
+  <script type="text/javascript" src="https://rawgit.com/meliveloz/cardify/master/lib/main.js">
+```
 
-### Global (navegador)
+### Ejemplo
 
-```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="path-to-cardify.js"></script>
-```
+![](assets/img/img_example.png)
 
-## Uso
 
-```js
-// `container` es el selector del contenedor donde se buscarán todas las
-// imágenes a ser procesadas.
-$(container).cardify({});
-```
+### Licencia
 
-## Ejemplos
++ [ISC License](https://opensource.org/licenses/ISC)
+
+### Demo
 
-...
++ https://meliveloz.github.io/cardify-demo/

assets/css/main.css

@@ -0,0 +1,18 @@
+
+body{
+  background-color: #303B45;
+}
+img{
+  border-radius: 5%;
+  margin-bottom: 2em;
+}
+
+h1{
+  font-family: 'Special Elite';
+  font-size: 4em;
+  color: #9FD97C;
+}
+
+h3{
+  font-family: 'Special Elite';
+}

index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="assets/css/main.css">
+</head>
+<body>
+  <div class="page-header">
+    <div class="page-header">
+      <h1 class="text-center">SLOTH PEOPLE</h1>
+    </div>
+  </div> 
+  <div class="cardify container">
+    <div class="row">
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/uno.jpg"  alt="COLGADO">
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/dos.jpg" alt="ASTRONAUTA">
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/tres.jpg" alt="ENCAÑADO">      
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/cuatro.jpg"  alt="AILEEN">      
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-cuatro.gif"  style="height: 210px" alt="MELI">
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-cinco.gif"  alt="VANE">
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-seis.gif"  style="height: 210px" alt="VALE">      
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-tres.gif"  style="height: 210px" alt="MARCIA">
+      </div>
+    </div>
+    <div class="row">
+       <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-uno.gif" alt = "KOTE">
+
+       </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-dos.gif" style="height: 260px" alt="MAITE">
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-siete.gif" style="height: 260px" alt="ROX">      
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/g-ocho.gif" style="height: 260px" alt="¡¡NO ALCANCÉ!!">   
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/cinco.jpg" style="height: 265px" alt="MASSIEL">
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/nueve.jpg" alt="ALE">
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/siete.jpg" alt="FABIÁN">      
+      </div>
+      <div class="col-lg-3">
+        <img class="img-responsive" src="assets/img/ocho.jpg" style="height: 265px" alt="TANKO">      
+      </div>
+    </div>
+  </div>
+<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
+<script type="text/javascript" src="lib/main.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,2 @@
+const cardify = require("./src/app.js");
+module.exports = cardify;