Tu reto es construir este formulario interactivo de detalles de la tarjeta y conseguir que se parezca lo más posible al diseño.

Puedes utilizar las herramientas que quieras para ayudarte a completar el reto. Así que si tienes algo que te gustaría practicar, no dudes en intentarlo.

Tus usuarios deben ser capaces de:

• Rellenar el formulario y ver cómo se actualizan los datos de la tarjeta en tiempo real
• Recibir mensajes de error al enviar el formulario si:
  • Cualquier campo de entrada está vacío
  • Los campos de número de tarjeta, fecha de caducidad o CVC tienen un formato incorrecto
• Ver el diseño óptimo en función del tamaño de la pantalla de su dispositivo
• Ver los estados de "hover", "active" y "focus" de los elementos interactivos de la página

• Actualizar los datos de la tarjeta a medida que el usuario rellena los campos
• Validar los campos del formulario cuando se envíe el formulario
• Si no hay errores, mostrar el estado completado
• Restablecer el formulario cuando el usuario haga clic en "Continuar" en el estado completado

Hay muchas maneras de alojar su proyecto de forma gratuita. Nuestras recomendaciones son:

• GitHub Pages
• Vercel
• Netlify