Solution to the Interactive Card Details Form challenge on Frontend Mentor.

• Build out a interactive card details form using provided desktop and mobile designs
• 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
  • See a completed/success page and reset the from

Live Site: tinuola.github.io/fm_interactive-card-details

• Building custom form validation, especially the logic/sequence for validating input as it is typed, and then updating the form and display states as input is corrected
• Functional programming practice/approach
• A regex pattern that can account for the many ways a fullname can be constructed is non-existent? 🤷🏽‍♀️
  • The simplest and least tedious approach, though definitely not inclusive, was to default to alphabetical character-only input (no more than a single blank space between names) up to a specific length
• Using animation (e.g., card movements) to enhance visual interest or UI-UX
• Challenge was project #2 of GDI's Frontend Projects (Beginner) Workshop mini-cohort in February 2024 that I faciliated
  • Code implementation of the project's phases/steps are archived in the gdi-steps folder

• Validate on input
• Animate on submit error and submit success
• Improve screen reader accessibility
  • Announce: error and success states (Use _aria-live_?)

• HTML, CSS, JavaScript
• CSS Resets
• CSS Positioning
• Regular Expressions
  • Modified: Regex to validate full name (Stack Overflow)
• CSS Shake Animation (CSS Tricks)

Visit my Frontend Mentor profile to view other challenges I've completed!