diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..63967d50 --- /dev/null +++ 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 + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c69c87fd --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +Thumbs.db +.DS_store \ No newline at end of file diff --git a/README.md b/README.md index 5bdda8e9..b7ba9138 100644 --- 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 ```
``` que contiene la/s imagen/es (``````), así como un ```
``` 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 `
` que contenga la imagen (``) además de un `
` -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//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). +``` + +``` -> 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. -*** +``` + +``` -## Instalación +3. Agrega el archivo index.js a tu carpeta js, escribiendo la ruta correcta en tu html. -### Global (navegador) +``` + +``` + +4. Agrega un container en tu html con la clase "imgwrap" -```html - - +``` +
my image
``` -## 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({}); ``` +
my image
+``` + +# 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. + +``` + + + + + + + Your web + + + + + + +
+ +
+
+ + My Image +
+
+
+ + + + + + + + +``` + +# Autores + +* Andrea Diaz +* Sabrina Villalobos -## Ejemplos +# Licencia -... +* ISC License \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 00000000..6038acbd --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/chai-jquery.js b/chai-jquery.js new file mode 100644 index 00000000..e06fd072 --- /dev/null +++ b/chai-jquery.js @@ -0,0 +1,240 @@ +(function (chaiJquery) { + // Module systems magic dance. + if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { + // NodeJS + module.exports = chaiJquery; + } else if (typeof define === "function" && define.amd) { + // AMD + define(['jquery'], function ($) { + return function (chai, utils) { + return chaiJquery(chai, utils, $); + }; + }); + } else { + // Other environment (usually '); +const { window } = dom; +global.document = dom; +global.window = window; +global.navigator = { + userAgent: 'node.js', +}; + +var $ = require('jquery'); +const cardify = require("../src/index.js"); +var expect = require('chai').expect; + +describe('cardify', function(){ + + +it ('alt debería ser un string', function(){ + expect('alt').to.be.a('string'); +}) +it ('figcaption debería ser un string', function(){ + expect('figcaption').to.be.a('string'); +}) +it ('alt no está vacío', function(){ + assert.exists('alt', 'alt no está vacio'); +}) +it('la extensión de la imagen es correcta', function() { +$('img').attr('src').substring($('img').attr('src').lastIndexOf('.')) === '.jpg' && '.png' && '.gif' && '.jpeg' && '.svg'; +}); +it('src no está vacío', function() { +$('img').attr('src').length > 0; +}); +it('figure class no está vacío', function() { +$('figure').attr('class').length > 0; +}); +it('figcaption class no está vacío', function() { +$('figcaption').attr('class').length > 0; +}); +}); +