El objetivo del proyecto Card Validation fué crear una herramienta con contexto, en la que se pudiera validar y solo dejar ver los ultimos cuatro dígitos de la tarjeta introudcida por el usuario.
Los lenguajes utilizdos para este propyecto fueron HTML, CSS y JavaScript Vanilla.
El proyecto atiende a la neceidad del carrito de compras para una libreria llamada Gandhi. Los usuarios en quienes esta pensado son las personas que gustan por la lectura y que hacen compra de los libros online. Se buscó que el diseño de la página fuera visualmente limpia e intuitiva.
El primer prototipo en crearse fue el de baja fidelidad, con pluma y papel atendiendo el diseño de un carrito de compras en el que se pueda ver del lado derecho el formulario que se esta llenandno y del lado derecho de la pantalla el resumen del carrito.
El segundo prototipo que se creo fue el de alta fidelidad con la herramienta Figma. Se tenía planeado realizar tres vistas en las que el usuario fuera llenando los datos de infomación de contacto, envio y por ultimo el pago en donde se realizaria la validación y enmascarado del número de tarjeta.
Vista 1
Vista 2
Vista 3
Por el tiempo se decidió solo hacer una vista con el formulario ya que lo importante de este proyecto era la validación y la función de enmascarar el número de tarjeta.
Resultado final:
