DEV004-card-validation

Tarjeta de crédito válida

Índice

• 1. Preámbulo
• 2. Objetivos de aprendizaje generales
• 3. Consideraciones generales

---

1. Preámbulo

El 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.

El desarrollo de esta aplicacion Web esta basado en un entorno de pagina de banco donde se validan los datos de una tarjeta de credito para mostrar toda la informacion relacionada a ella.

2. Objetivos de aprendizaje generales

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

• Uso de HTML semántico

  Links

  * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)

</p></details>

CSS

• Uso de selectores de CSS

  Links

  * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)

</p></details>

• Modelo de caja (box model): borde, margen, padding

  Links

  * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)

</p></details>

Web APIs

• Uso de selectores del DOM

  Links

  * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

</p></details>

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)

</p></details>

• Manipulación dinámica del DOM

  Links

  * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML)

</p></details>

JavaScript

• Tipos de datos primitivos

  Links

  * [Valores primitivos - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures#valores_primitivos)

</p></details>

• Strings (cadenas de caracteres)

  Links

  * [Strings](https://curriculum.laboratoria.la/es/topics/javascript/06-strings) * [String — Cadena de caracteres - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String)

</p></details>

• Variables (declaración, asignación, ámbito)

  Links

  * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)

</p></details>

• Uso de condicionales (if-else,)

  Links

</p></details>

• Uso de bucles/ciclos (for)

  Links

</p></details>

• Funciones (params, args, return)

  Links

  * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)

</p></details>

• Pruebas unitarias (unit tests)

  Links

  * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)

</p></details>

• Módulos de ECMAScript (ES Modules)

  Links

  * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)

</p></details>

• Uso de linter (ESLINT)

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

Control de Versiones (Git y GitHub)

• Git: Instalación y configuración

• Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• GitHub: Creación de cuenta y repos, configuración de llaves SSH

• GitHub: Despliegue con GitHub Pages

  Links

  * [Sitio oficial de GitHub Pages](https://pages.github.com/)

</p></details>

Centrado en el usuario

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Crear prototipos de alta fidelidad que incluyan interacciones

• Seguir los principios básicos de diseño visual

2. Pruebas unitarias de los métodos.
Los metódos de validator (isValid y maskify) tienen cobertura con pruebas unitarias.

4. Proyecto Validación de tarjeta de credito.

Encarcado en un entorno de página de banco, enfocado en usuarios que requieren saber movimientos y saldos de su tarjeta se implementa este proyecto el cual incluye los siguientes elementos:

• Permitir insertar el número de la tarjeta que se quiere validar
  en un campo de texto vacío.
• Evita que puedan escribir caracteres que no sean numéricos (dígitos 0-9).
• Impede que se intente validar si es que el campo está vacío (no se ha escrito nada).
• Comunicar a la usuaria si se trata una tarjeta válida o no.
• Ocultar todos los dígitos del número de tarjeta con exepción de los últimos 4 caracteres.