chore(init): Adds project files from curriculum

Author: luucamay

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-transform-modules-commonjs"]
+}

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-console": "warn"
+  }
+}

.gitignore

@@ -0,0 +1,13 @@
+coverage/
+node_modules/
+.DS_Store
+*.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -0,0 +1,298 @@
+# Tarjeta de crédito válida
+
+## Índice
+
+* [1. Preámbulo](#1-preámbulo)
+* [2. Resumen del proyecto](#2-resumen-del-proyecto)
+* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje)
+* [4. Consideraciones generales](#4-consideraciones-generales)
+* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto)
+* [6. Pistas, tips y lecturas complementarias](#6-pistas-tips-y-lecturas-complementarias)
+
+***
+
+## 1. Preámbulo
+
+El [algoritmo de Luhn](https://es.wikipedia.org/wiki/Algoritmo_de_Luhn),
+también llamado algoritmo de módulo 10, es un método de suma de verificación,
+se utiliza para validar números de identificación; tales como el IMEI de los
+celulares, tarjetas de crédito, etc.
+
+Este algoritmo es simple. Obtenemos la reversa del número a verificar (que
+solamente contiene dígitos [0-9]); a todos los números que ocupan una posición
+par se les debe multiplicar por dos, si este número es mayor o igual a 10,
+debemos sumar los dígitos del resultado; el número a verificar será válido si
+la suma de sus dígitos finales es un múltiplo de 10.
+
+![gráfica de algoritmo de Luhn](https://www.101computing.net/wp/wp-content/uploads/Luhn-Algorithm.png)
+
+## 2. Resumen del proyecto
+
+En este proyecto tendrás que construir una aplicación web que le permita a un
+usuario validar el número de una tarjeta de crédito. Además, tendrás que
+implementar funcionalidad para ocultar todos los dígitos de una tarjeta menos
+los últimos cuatro.
+
+La temática es libre. Tú debes pensar en qué situaciones de la vida real se
+necesitaría validar una tarjeta de crédito y pensar en cómo debe ser esa
+experiencia de uso (qué pantallas, explicaciones, mensajes, colores, ¿marca?)
+etc.
+
+## 3. Objetivos de aprendizaje
+
+Trabajando en parejas aprenderán a construir una aplicación web que interactuará
+con lx usuarix final a través del navegador, utilizando HTML, CSS y JavaScript
+como tecnologías.
+
+Dicho en palabras sencillas, aprenderás a:
+
+* Organizar tu tiempo y priorizar tareas en un entorno de
+  **alta incertidumbre**.
+* Entender las **necesidades del usuario** y cómo proponer una solución.
+* Entender la importancia del proceso de prototipado durante la creación de un
+  producto digital.
+* Conocer los principios básicos del diseño visual.
+* Utilizar etiquetas semánticas de HTML y elementos de formulario.
+* Mostrar elementos de formulario en la pantalla usando **HTML** y **CSS**.
+* Utilizar diversos tipos de selectores en CSS: de elemento, de clase, de id.
+* Utilizar el modelo de cajas de CSS (border, margin, padding).
+* Definir reglas de estilo en CSS.
+* Permitir al usuario interactuar con elementos del DOM y hacer que la
+  aplicación responda cuando ocurran esos **eventos del DOM**.
+* Manipular _**strings**_ (cadenas de texto).
+* Usar **control de flujo** (bucles, condicionales, ...).
+* Actualizar la pantalla con los resultados (**manipular el DOM**) a través de
+  **innerHTML** o **textContent**.
+* **Implementar funciones** dada una descripción de su comportamiento.
+* Verificar que tus funciones hagan las cosas para las que fueron creadas
+  (**pruebas unitarias (_unit tests_) con [Jest](https://jestjs.io/es-ES/)**).
+* Configurar tu cuenta de git.
+* Hacer _fork_ y _clonar_ el repositorio del proyecto.
+* Mantener actualizado los cambios en tu repositorio remoto
+  (commit, pull, push).
+* Desplegar tu proyecto en [GitHub Pages](https://pages.github.com).
+
+## 4. Consideraciones generales
+
+* El equipo de coaches te dará un tiempo sugerido e indicaciones sobre si trabajar
+  sola o en equipo. Recuerda que cada una aprende a diferente ritmo.
+* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
+  interfaz será desplegada usando GitHub pages. Si no sabes lo que es GitHub, no
+  te preocupes, lo aprenderás durante este proyecto.
+
+## 5. Criterios de aceptación mínimos del proyecto
+
+Usa solo caracteres numéricos (dígitos) en la tarjeta a validar [0-9].
+
+### Definición del producto
+
+En el `README.md`, cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso
+para definir el producto final a nivel de experiencia y de interfaz.
+
+* Quiénes son los principales usuarios de producto.
+* Cuáles son los objetivos de estos usuarios en relación con tu producto.
+* Cómo crees que el producto que estás creando está resolviendo sus problemas.
+
+### Interfaz de usuario (UI)
+
+La interfaz debe permitir al usuario:
+
+* Insertar el número que queremos validar.
+* Ver el resultado si es válido o no.
+* Ocultar todos los dígitos de su número de tarjeta menos los últimos
+4 caracteres.
+* No debe poder ingresar un campo vacío.
+
+### UX (Diseño de experiencia de usuario)
+
+Antes de iniciar a codear, debes entender el problema que quieres solucionar y
+cómo tu aplicación lo soluciona.
+
+* Trabaja tu primer prototipo con papel y lápiz (blanco y negro).
+* Luego valida esta solución con una compañera (pedir feedback).
+* Toma lo aprendido al momento de validar tu primer prototipo y desarrolla un
+  nuevo prototipo usando alguna herramienta para diseño de prototipos
+  ([Balsamiq](https://balsamiq.com/), [Figma](https://www.figma.com/),
+  [Google Slides](https://www.google.com/intl/es/slides/about/), etc.)
+Estos puntos los presentarás en el `README.md`.
+
+### Scripts / Archivos
+
+#### General
+
+##### `README.md`
+
+Debe contener lo siguiente:
+
+* Un título con el nombre de tu proyecto.
+* Un resumen de 1 o 2 líneas de qué se trata tu proyecto.
+* La imagen final de tu proyecto.
+* Investigación UX:
+  1. Explicar quiénes son los usuarios y los objetivos en relación con el
+    producto.
+  2. Explicar cómo el producto soluciona los problemas/necesidades de dichos
+    usuarios.
+  3. Luego colocarás la foto de tu primer prototipo en papel.
+  4. Agregar un resumen del feedback recibido indicando las mejoras a realizar.
+  5. Imagen del prototipo final.
+
+#### Visualmente (HTML y CSS)
+
+Deberás maquetar de forma exacta el prototipo final que hiciste en la herramienta
+de diseño de prototipos que escogiste utilizando HTML y CSS. En este momento elegirás
+los colores, tipo de fuente, etc a usar.
+
+A continuación describimos los archivos que utilizarás:
+
+##### `src/index.html`
+
+En este archivo va el contenido que se mostrará al usuario (esqueleto HTML).
+Encontrarás 3 etiquetas iniciales, las cuales si deseas puedes borrar y empezar
+de cero:
+
+* `<header>`: encabezado de tu proyecto.
+* `<main>`: contenido principal de tu proyecto.
+* `<footer>`: pie de página de tu proyecto.
+
+##### `src/style.css`
+
+Este archivo debe contener las reglas de estilo. Queremos que escribas tus
+propias reglas, por eso NO está permitido el uso de frameworks de CSS
+(Bootstrap, materialize, etc).
+
+#### Funcionalmente (JavaScript - pruebas unitarias)
+
+* La lógica del proyecto debe estar implementada completamente en JavaScript.
+* En este proyecto NO está permitido usar librerías o frameworks, sólo JavaScript
+puro también conocido como Vanilla JavaScript.
+* No se debe utilizar la _pseudo-variable_ `this`.
+
+Vas a tener 2 archivos JavaScript separando responsabilidades, a continuación
+indicamos qué harás en cada archivo:
+
+##### `src/validator.js`
+
+Acá escribirás las funciones necesarias para que el usuario pueda verificar la
+tarjeta de crédito y ocultar los dígitos de su número de tarjeta.
+Esta función debe ser pura e independiente del DOM.
+
+Para esto debes implementar el **objeto `validator`**, el cual ya se encuentra
+_exportado_ en el _boilerplate_. Este objeto (`validator`) contiene
+dos métodos (`isValid` y `maskify`):
+
+* **`validator.isValid(creditCardNumber)`**: `creditCardNumber` es un `string`
+con el número de tarjeta que se va a verificar. Esta función debe retornar un
+`boolean` dependiendo si es válida de acuerdo al [algoritmo de Luhn](https://es.wikipedia.org/wiki/Algoritmo_de_Luhn).
+
+* **`validator.maskify(creditCardNumber)`**: `creditCardNumber` es un `string` con
+el número de tarjeta y esta función debe retornar un `string` donde todos menos
+los últimos cuatro caracteres sean reemplazados por un numeral (`#`) o 🐱.
+Esta función deberá siempre mantener los últimos cuatro caracteres intactos, aún
+cuando el `string` sea de menor longitud.
+
+    Ejemplo de uso
+
+    ```js
+    maskify('4556364607935616') === '############5616'
+    maskify(     '64607935616') ===      '#######5616'
+    maskify(               '1') ===                '1'
+    maskify(               '')  ===                ''
+    ```
+
+##### `src/index.js`
+
+Acá escribirás todo el código que tenga que ver con la interacción del DOM
+(seleccionar, actualizar y manipular elementos del DOM y eventos).
+Es decir, en este archivo deberás invocar las funciones `isValid` y `maskify`
+según sea necesario para actualizar el resultado en la pantalla (UI).
+
+##### `test/validator.spec.js`
+
+En este archivo tendrás que completar las pruebas unitarias de las funciones
+`validator.isValid(creditCardNumber)` y `validator.maskify(creditCardNumber)`
+implementadas en `validator.js` utilizando [Jest](https://jestjs.io/es-ES/).
+Tus pruebas unitarias deben dar un 70% en _coverage_ (cobertura),
+_statements_ (sentencias), _functions_ (funciones) y _lines_ (líneas); y un
+mínimo del 50% de _branches_ (ramas).
+
+***
+
+## 6. Pistas, tips y lecturas complementarias
+
+### Primeros pasos
+
+1. Antes que nada, asegúrate de tener un :pencil: editor de texto en
+  condiciones, algo como [Atom](https://atom.io/) o
+  [Code](https://code.visualstudio.com/).
+2. Para ejecutar los comandos a continuación necesitarás una :shell:
+  [UNIX Shell](https://github.com/Laboratoria/bootcamp/tree/master/topics/shell),
+  que es un programita que interpreta líneas de comando (command-line
+  interpreter) así como tener [git](https://github.com/Laboratoria/bootcamp/tree/master/topics/scm/01-git)
+  instalado. Si usas un sistema operativo "UNIX-like", como GNU/Linux o MacOS,
+  ya tienes una _shell_ (terminal) instalada por defecto (y probablemente `git`
+  también). Si usas Windows puedes usar la versión completa de [Cmder](https://cmder.net/)
+  que incluye [Git bash](https://git-scm.com/download/win) y si tienes Windows 10
+  o superior puedes usar [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/install-win10).
+3. Una de las integrantes del equipo debe realizar un :fork_and_knife:
+  [fork](https://help.github.com/articles/fork-a-repo/) del repo de tu cohort,
+  tus _coaches_ te compartirán un _link_ a un repo y te darán acceso de lectura
+  en ese repo. La otra integrante del equipo deber hacer un fork **del
+  repositorio de su compañera** y
+  [configurar](https://gist.github.com/BCasal/026e4c7f5c71418485c1) un `remote`
+  hacia el mismo.
+4. :arrow_down: [Clona](https://help.github.com/articles/cloning-a-repository/)
+  tu _fork_ a tu computadora (copia local).
+5. 📦 Instala las dependencias del proyecto con el comando `npm install`. Esto
+  asume que has instalado [Node.js](https://nodejs.org/) (que incluye [npm](https://docs.npmjs.com/)).
+6. Si todo ha ido bien, deberías poder ejecutar las :traffic_light:
+  pruebas unitarias (unit tests) con el comando `npm test`.
+7. Para ver la interfaz de tu programa en el navegador, usa el comando
+  `npm start` para arrancar el servidor web y dirígete a
+  `http://localhost:5000` en tu navegador.
+8. A codear se ha dicho! :rocket:
+
+### Recursos y temas relacionados
+
+A continuación un video de Michelle que te lleva a través del algoritmo de Luhn
+y un par de cosas más que debes saber para resolver este proyecto. ¡Escúchala
+con detenimiento y sigue sus consejos! :)
+
+[![tips credit card](https://img.youtube.com/vi/f0zL6Ot9y_w/0.jpg)](https://www.youtube.com/watch?v=f0zL6Ot9y_w)
+
+[Link](https://www.youtube.com/watch?v=f0zL6Ot9y_w)
+
+Terminal y shell de UNIX:
+
+[![Playlist de Terminal y shell de UNIX](https://img.youtube.com/vi/GB35Eyb-J4c/0.jpg)](https://www.youtube.com/playlist?list=PLiAEe0-R7u8nGH5TEHfSTeDNIvjZFe_Yd)
+
+[Link](https://www.youtube.com/playlist?list=PLiAEe0-R7u8nGH5TEHfSTeDNIvjZFe_Yd)
+
+Control de versiones y trabajo colaborativo con Git y GitHub:
+
+[![Playlist de control de versiones y trabajo colaborativo](https://img.youtube.com/vi/F1EoBbvhaqU/0.jpg)](https://www.youtube.com/playlist?list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV)
+
+[Link](https://www.youtube.com/playlist?list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV)
+
+Diseño de experiencia de usuario (User Experience Design):
+
+* Ideación
+* Prototipado (sketching)
+* Testeo e Iteración
+
+Desarrollo Front-end:
+
+* Valores
+* Tipos
+* Variables
+* Control de flujo
+* Tests unitarios
+* [Documentación de NPM](https://docs.npmjs.com/)
+
+Organización del Trabajo:
+
+* [Metodologías Ágiles](https://www.youtube.com/watch?v=v3fLx7VHxGM)
+* [Scrum en menos de 2 minutos](https://www.youtube.com/watch?v=TRcReyRYIMg)
+* [Scrum en Detalle](https://www.youtube.com/watch?v=nOlwF3HRrAY&t=297s). No
+  esperamos que hagas todo eso desde este proyecto. Iremos profundizando poco a
+  poco a lo largo del -_bootcamp_.
+* [Blog: cómo funciona el algoritmo de Luhn](http://www.quobit.mx/asi-funciona-el-algoritmo-de-luhn-para-generar-numeros-de-tarjetas-de-credito.html).

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "card-validation",
+  "version": "1.0.0",
+  "main": "src/index.html",
+  "license": "MIT",
+  "scripts": {
+    "htmlhint": "htmlhint src/*.html test/*.html",
+    "eslint": "eslint --ext .js src/ test/",
+    "pretest": "npm run eslint && npm run htmlhint",
+    "test": "jest --verbose --coverage",
+    "open-coverage-report": "opener ./coverage/lcov-report/index.html",
+    "start": "serve ./src",
+    "deploy": "gh-pages -d src"
+  },
+  "dependencies": {
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+    "babel-jest": "^24.9.0",
+    "eslint": "^5.9.0",
+    "gh-pages": "^2.1.1",
+    "htmlhint": "^0.11.0",
+    "jest": "^24.9.0",
+    "opener": "^1.5.1",
+    "serve": "^11.0.0"
+  }
+}

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tarjeta de crédito válida</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header></header>
+    <main></main>
+    <footer></footer>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>

src/index.js

@@ -0,0 +1,3 @@
+import validator from './validator.js';
+
+console.log(validator);

src/style.css

@@ -0,0 +1,5 @@
+const validator = {
+  // ...
+};
+
+export default validator;

src/validator.js

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}