Tarjeta de crédito válida

Índice

1. Proyecto
2. Prototipo
[3. Publico objetivo](#3-Publico objetivo)
[4. Que problema resuelve](#4- Que problema resuelve)
5. Interfaz
[6. Lecturas y recursos utilizados](#6 Lecturas y recuersos utilizados)
7. Consideraciones técnicas
8. Objetivos de aprendizaje
9. Pistas, tips y lecturas complementarias
10. Para considerar Project Feedback

1. Proyecto

Este proyecto consiste en crear una interfaz que permita al usuario ingresar los datos de su tarjeta de credito para poder culminar el proceso de compra en la tienda de productos Kawaii, esta tienda cuenta con articulos exclusivos del mundo Kawaii, que desde hace varios años se ha relacionado con moda y personajes dentro de la cultura pop japonesa y que el propio concepto busca expresar una sensación de alegría e ilusión y no solo se usa para describir a bebés o animales, sino que también se aplica a ropa, artículos de decoración y hasta dulces, esta tienda busca captar toda la cultura del concepto Kawaii para hacer sentir a su público dentro de un espacio conocido, seguro y que les genere emoción y felicidad al realizar su compra.

2. Prototipo

Se desarrollo esta interfaz a través de mini proyectos en Notion y luego con una planificacion en notas con Trello, en cuanto al diseño se armó un esqueleto básico en papel y sobre todo se considero el uso de colores e imagenes relacionadas a la cultura Kawaii.

3. Publico objetivo

La página está dirigida a las seguidores de la cultura Kawaii, especificamemnte a un público femenino entre 25 y 40 años que cuenta con una fuente de ingresos, que sean mamás y que tiene un gusto singular por los articulos Kawaii para satisfacer las necesidades de su dia a dia, ejemplo: estudios o trabajo (a través de articulos de papelería y escritorio, articulos personales como mochilas, carteras, bolsos) y en el hogar(articulos personalizados para sus hijos y ellas)

4. Que problema resuelve

La tienda satisface la necesidad de organización y bienestar que la cultura Kawaii ofrece, nuestro publico son principalmente mamás con hijos que lidian durante el dia con la organizacion de las actividades del hogar, trabajo, hijos, familia, a veces esto puede llegar a ser muy estresante, la cultura Kawaii transmite alegría, belleza, ternura, además una calidez que nuestro público objetivo puede introducir en su día a dia y hacerlo más especial y que la carga de estres se transforme en una experiencia de colores, olores y alegría.

5.Interfaz

6. Lectura y recursos

Me apalanqué de muchas lecturas y tutoriales para poder entender el proceso de la logica y luego como dar estructura y estilo a mi interfaz, detallo algunas pag donde hice muchas consultas:

https://www.w3schools.com https://developer.mozilla.org/ https://webdesign.tutsplus.com https://javascript.info https://www.youtube.com/watch?v=7bciaLTTr7s https://exercism.org/tracks/javascript/exercises/annalyns-infiltration

7. Consideraciones técnicas

La lógica del proyecto debe estar implementada completamente en JavaScript. En este proyecto NO está permitido usar librerías o frameworks, solo JavaScript puro también conocido como Vanilla JavaScript.

Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio que contiene un boilerplate con tests (pruebas). Un boilerplate es la estructura basica de un proyecto que sirve como un punto de partida con archivos inicial y configuración basica de dependencias y tests.

Los tests unitarios deben cubrir un mínimo del 70% de statements, functions y lines, y un mínimo del 50% de branches. El boilerplate ya contiene el setup y configuración necesaria para ejecutar los tests (pruebas) así como code coverage para ver el nivel de cobertura de los tests usando el comando npm test.

El boilerplate que les damos contiene esta estructura:

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── validator.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── validator.spec.js

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.

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

Web APIs

Uso de selectores del DOM
Links

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

Manipulación dinámica del DOM
Links

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

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

9. Pistas, tips y lecturas complementarias

Primeros pasos

Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Code.
Para ejecutar los comandos a continuación necesitarás una 🐚 UNIX Shell, que es un programita que interpreta líneas de comando (command-line interpreter) así como tener 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 que incluye Git bash y si tienes Windows 10 o superior puedes usar Windows Subsystem for Linux.
Una de las integrantes del equipo debe realizar un 🍴 fork 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 un remote hacia el mismo.
⬇️ Clona tu fork a tu computadora (copia local).
📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
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.
A codear se ha dicho! 🚀

Recursos y temas relacionados

Súmate al canal de Slack #project-card-validation para conversar y pedir ayuda de proyecto.

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:

Documentación de NPM

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.

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Tarjeta de crédito válida

Índice

1. Proyecto

2. Prototipo

3. Publico objetivo

4. Que problema resuelve

5.Interfaz

6. Lectura y recursos