Skip to content

Mohammadflht/Interactive-Card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Interactive card details form

Design preview for the Interactive card details form coding challenge

Rules

Users should be able to:

  • Fill in the form and see the card details update in real-time
  • Receive error messages when the form is submitted if:
    • Any input field is empty
    • The card number, expiry date, or CVC fields are in the wrong format
  • View the optimal layout depending on their device's screen size
  • See hover, active, and focus states for interactive elements on the page

Expected behaviour

  • Update the details on the card as the user fills in the fields
  • Validate the form fields when the form is submitted
  • If there are no errors, display the completed state
  • Reset the form when the user clicks "Continue" on the completed state