Tarjeta de crédito válida

Índice

• Tarjeta de crédito válida
  • Índice
    • Objetivo
    • Funcionalidad:
    • Interacción:
    • Vista
    • Link
  • Objetivos de aprendizaje
    • HTML
    • CSS
    • Web APIs
    • JavaScript
    • Control de Versiones (Git y GitHub)
    • Centrado en el usuario
    • Diseño de producto
  • Criterios

---

Objetivo

Desarrollo de un validador de tarjetas de crédito para BanCode.

Funcionalidad:

Permite validar una tarjeta de crédito mediante el algoritmo de Luhn.

Interacción:

• Permite al usuario ingresar un número de tarjeta.
• El campo se mostrará de color rojo si es un número inválido o se esté enviando el campo vacío.
• El campo se mostrará de color verde en caso que se un número válido, además, se mostrará el formulario donde el usuario podrá ingresar datos complementarios de la tarjeta (nombre, fecha de vencimiento y CVV).

Vista

Link

URL: Card Validation | BanCode

Objetivos de aprendizaje

HTML

• Uso de HTML semántico

CSS

• Uso de selectores de CSS

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

Web APIs

• Uso de selectores del DOM

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

• Manipulación dinámica del DOM

JavaScript

• Tipos de datos primitivos

• Strings (cadenas de caracteres)

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

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

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

• Funciones (params, args, return)

• Pruebas unitarias (unit tests)

• Módulos de ECMAScript (ES Modules)

• 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

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

Criterios

Criterios de aceptación:

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