Tarjeta de crédito válida

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Fundacion Rosa por una Vida
• 4. Aspectos generales de la pagina
• 5. Objetivos de aprendizaje
• 6. Para considerar Project Feedback

---

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.

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.

Como continuación del proyecto de preadmisión, volverás a trabajar sobre fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS. Mientras desarrollas este proyecto, te familiarizarás con nuevos conceptos también.

3. Fundacion Rosa por una Vida.

El objetivo de la interfaz es que sea amigable con el usuario y predicitiva, la parte inicial de la pagina se presenta con un encabezado donde se coloca el nombre de la "empresa o fundación", seguido del nombre se coloco un pequelo texto dando a entender el fin de la pagina y de la actividad que se realice ya sea una compra u donación.

Finalmente se llego a la conclusion de realizar la pagina enfocada a una fundacion enfocada al cancer de mama, para todas aquellas personas que busquen dar apoyos economicos a las mujeres que lo necesiten, ya sea usado para tratamientos, medicinas, traslados hospitalitarios, etc.

• Quiénes son los principales usuarios de producto. La pagina de la fundacion esta enfocada a cualquier personas que busque colaborar con su apoyo economico, mayor de edad y que cuente con una tarjeta bancaria debito o credito.

• Cuáles son los objetivos de estos usuarios en relación con tu producto. Su principal objetivo es que sea una interfaz amigable con el metodo en linea, se acepta cualquier tarjeta bancaria activa, para mayor seguridad para el usuario los numero de la tarjeta se enmascaran protegiendo sus datos personales, igualmente se espera que todos los campos sean vigentes y llenados con el fin de verificar los datos del usuario.

• 1. Al llenar los datos el usuario puede ir visualizando si es que estos son correctos, en la parte de arriba del formulario presenta esta información, el fin es brindarle la mayor comodidad al usuario. Los datos que el usuario puede visualizar son:

• Número de tarjeta.
• Titular de tarjeta.
• Fecha de expiración.

• 2. Seguido de la imagen de la tarjeta de credito se presenta la seccion del formulario, se espera que el usuario ingrese los datos pertinentes del pago que se realizara u donacion por parte del usuario, en esta seccion se muestran los campos a llenar, los cuales son campos con tipo input, en los cuales el usuario podra ingresar sus datos:

• Nombre de titular.
• Número de tarjeta.
• Fecha de expiración (Mes y Año) - Estos son selecctores buscando facilitar el ingreso de datos al usuario.
• CVV.
• Boton de realizar pago. Identificado con color y diseño para que sea mas atractivo al usuario.

• 3. La interfaz es muy amigable y predictiva, si algun campo no es llenado este adiertes con una alerta al usuario que debe verificar los datos de pago, en caso de que alguno sea olvidado o no colocado de la forma correcta.

• 4. Finalmente se busco que el diseño de la pagina represente a la fundacion "Rosa por una Vida" enfocandonos en los tonos respresentativos del cancer de mama, como es el tono rosa. El diseño final se presenta de la siguiente forma.

Se espera que las personas interesadas sobre el tema del cancer de mama se sienta identificada con la pagina y participe con sus donaciones.

4. Aspectos generales de la pagina.

Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo cubra los objetivos principales.

• La pagina solo permite insertar un numero (texto) que quieres validar. Usa solo caracteres numéricos (dígitos) en la tarjeta a validar [0-9].
• La pagina permite ver si el resultado es válido o no.
• La pagina permite ocultar todos los dígitos del número de tarjeta a exepción de los últimos 4 caracteres.
• La pagina restringe poder ingresar un campo vacío.

Descripción de scripts / archivos

• README.md: debe explicar la información necesaria para el uso de tu aplicación web, así como una introducción a la aplicación, su funcionalidad y decisiones de diseño que tomaron.

• src/index.html: este es el punto de entrada a tu aplicación. Este archivo debe contener tu markup (HTML) e incluir el CSS y JavaScript necesario.

• 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).

• src/validator.js: acá debes implementar el objeto validator, el cual ya está exportado en el boilerplate. Este objeto (validator) debe contener dos métodos:

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

  • 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

    maskify('4556364607935616') === '############5616'
    maskify(     '64607935616') ===      '#######5616'
    maskify(               '1') ===                '1'
    maskify(               '')  ===                ''

• src/index.js: acá debes escuchar eventos del DOM, invocar validator.isValid() y validator.maskify() según sea necesario y actualizar el resultado en la UI (interfaz de usuario).

• test/validator.spec.js: este archivo contiene algunos tests de ejemplo y acá tendrás que implementar los tests para validator.isValid() y validator.maskify().

El boilerplate incluye tareas que ejecutan eslint y htmlhint para verificar el HTML y JavaScript con respecto a una guías de estilos. Ambas tareas se ejecutan automáticamente antes de ejecutar las pruebas (tests) cuando usamos el comando npm run test. En el caso de JavaScript estamos usando un archivo de configuración de eslint que se llama .eslintrc que contiene un mínimo de información sobre el parser que usar (qué version de JavaScript/ECMAScript), el entorno (browser en este caso) y las reglas recomendadas ("eslint:recommended"). En cuanto a reglas/guías de estilo en sí, usaremos las recomendaciones por defecto de tanto eslint como htmlhint.

---

Deploy

Hacer que los sitios estén publicados (o desplegados) para que usuarias de la web puedan acceder a él es algo común en proyectos de desarrollo de software.

En este proyecto, utilizaremos Github Pages para desplegar nuestro sitio web.

El comando npm run deploy puede ayudarte con esta tarea y también puedes consultar su documentación oficial.

5. Objetivos de aprendizaje

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
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

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

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

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

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de datos primitivos

  Links

  • Valores primitivos - MDN

• Strings (cadenas de caracteres)

  Links

  • Strings
  • String — Cadena de caracteres - MDN

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

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• 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

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

Recursos y temas relacionados

Súmate al canal de Slack #project-card-validation

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! :)

Link

Terminal y shell de UNIX:

Link

Control de versiones y trabajo colaborativo con Git y GitHub:

Link

Desarrollo Front-end:

• Aprende más sobre strings, arreglos, iterar arreglos, objetos y como definir métodos

Organización del Trabajo:

• Metodologías Ágiles
• Scrum en menos de 2 minutos
• Scrum en Detalle. 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.

---

6. Para considerar Project Feedback

En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback:

• Tiene una interfaz que permite a la usuaria saber si la tarjeta es valido y ocultar el numero hasta las 4 ultimos digitos.
• El proyecto será entregado incluyendo pruebas unitarios de los métodos de validator (isValid y maskify).
• El proyecto será entregado libre de errores de eslint (warnings son ok).
• El proyecto será entregado subiendo tu código a GitHub.
• La interfaz será "desplegada" usando GitHub Pages.
• El README contiene una definición del producto.