Laboratoria-learning · adgalaz · Jan 19, 2018 · Jan 19, 2018 · Jan 19, 2018 · Jan 20, 2018
diff --git a/.eslintrc b/.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
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+Thumbs.db
+.DS_store
diff --git a/README.md b/README.md
@@ -1,54 +1,94 @@
-# Cardify
+# Proyecto Cardify2.0
 
-* **Track:** _Common Core_
-* **Curso:** _JS Deep Dive: Crea tu propia librería usando JavaScript_
-* **Unidad:** _Producto final_
+Cardify2.0 es un complemento de jQuery que agrega un simple efecto de hover a tus imagenes. Este plugin busca todas las imágenes con clase (```imgCardify```) dentro de un contenedor y las reemplaza con un nuevo elemento ```<figure>``` que contiene la/s imagen/es (```<img>```), así como un ```<figcaption>``` con el texto del atributo "alt" de la imagen.
 
-***
+# Requerimientos Técnicos
 
-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.
+## Dependencias de Producción
+* JQuery v3.2.1
+* Bootstrap v4.0.0-alpha.6
 
-## Flujo de trabajo
+## Dependencias de Desarrollo
+* Mocha v5.0.0
+* Chai v4.1.2
+* JSDom v11.6.1
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+# Instalación
 
-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í:
+## Local
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/cardify.git
-   ```
+1. Agrega jQuery a tu proyecto
 
-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).
+```
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+```
 
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` :smiley:.
+2. Agrega el archivo main.css a tu carpeta css, escribiendo la ruta correcta en tu html.
 
-***
+```
+<link rel="stylesheet" href="path-to-main.css">
+```
 
-## Instalación
+3. Agrega el archivo index.js a tu carpeta js, escribiendo la ruta correcta en tu html.
 
-### Global (navegador)
+```
+<script src="path-to-index.js"></script>
+```
+
+4. Agrega un container en tu html con la clase "imgwrap"
 
-```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="path-to-cardify.js"></script>
+```
+<div class="imgwrap"><img class="imgCardify" src="path-to-image.jpg" alt="my image"></div>
 ```
 
-## Uso
+5. Agrega imagenes en tu html con la clase "imgCardify"
 
-```js
-// `container` es el selector del contenedor donde se buscarán todas las
-// imágenes a ser procesadas.
-$(container).cardify({});
 ```
+<div class="imgwrap"><img class="imgCardify" src="path-to-image.jpg" alt="my image"></div>
+```
+
+# Uso
+
+* El usuario puede instalar el plugin de manera local. Para ello, puede hacerlo descargando los archivos main.css e index.js directamente desde github y agregandolas a sus carpetas de proyecto css y js.
+
+```
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
+  <title>Your web</title>
+  <!--add main.css file-->
+  <link rel="stylesheet" href="path-to-main.css">
+</head>
+
+<body>
+
+    <div class="container">
+      <!--add div with class="imgwrap"-->
+      <div class="row imgwrap">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <!--add your image file-->
+          <img class="img-fluid imgCardify" src="path-to-image.jpg" alt="My Image">
+        </div>
+      </div>
+    </div>
+
+  <!--add jQuery and index.js files-->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <script src="path-to-index.js"></script>
+
+</body>
+
+</html>
+```
+
+# Autores
+
+* Andrea Diaz
+* Sabrina Villalobos
 
-## Ejemplos
+# Licencia
 
-...
+* ISC License
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -0,0 +1,32 @@
+.container {
+  max-width: 960px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 20px;
+  }
+
+
+.alt-text {
+  text-align: center;
+  display: block;
+  position: relative;
+  margin: 20px;
+  color: #fff;
+  }
+
+figcaption {
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 15px;
+  font-size: 14px;
+  line-height: 22px;
+  background-color: rgba(0,0,0,0.8);
+  }
+
+.alt-text:hover > figcaption.alt {
+  opacity: 1;
+  }