Skip to content
Submitted over 1 year ago

Responsive Interactive Card Details Form using CSS Flexbox

Chitunduā€¢20
@Chitundu15
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

The parts I found most difficult about this project were ;

  1. Finding a way to update the card details in real time.
  2. Changing the form to display a thank you message after clicking confirm

Community feedback

  • Jesusā€¢410
    @jesusleonel10Posted over 1 year ago

    Some suggestions:

    Instead of using the keyup event, you can instead use the input event that is executed when the value of the input is changed in real time.

    šŸ“– Info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

    You could also show the default text on the cards when the inputs are empty (using the input event when they are empty).

    You can validate the name input to avoid typing numbers or symbols

    I hope it helped you šŸ˜„āœŒ

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord