Responsive interactive card form with mobile-first approach

Community feedback

• 

  Larry•170

  @lawrence-yoonPosted over 1 year ago

  Hello Roksolana,

  I've also just completed this same project, and have a solution for one of your problems.

  For the formatting of the card number input, you need to send the data through a function that will return the modified/formatted string. I wrote something that worked for me. Please see code below:

    const formattedCardNumber = () => {
      let string = "";
      for (let i = 0; i < cardInfo.cardNumber.length; i += 4) {
        string = string + cardInfo.cardNumber.substring(i, i + 4) + " ";
      }
      return string;
    };
  

  As for the rounded corners for input when focused, I am not too sure. I took a quick peek at your css file, perhaps you need to add(initialize?) border under the focus selector, so that the border-radius has something to work with? For my focus states I used outline instead of border, which I think is a nicer approach, due to not affecting the layouts by shifting things by the border's width pixels.

  Marked as helpful

  1

  ---

  

  Roksolana•910

  @RoksolanaVeresPosted over 1 year ago

  Hi, Larry! Thank you very much for the feedback. I'll try to fix my solution based on your recommendations)

  0