Skip to content
OverviewSolutions
5
Comments
3
Larry
@lawrence-yoon

All comments

  • Larry•170
    @lawrence-yoon

    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
  • Larry•170
    @lawrence-yoon

    Nice project! You should also add an alt attribute to describe what the image is. That way in situations like this, if the image is not working correctly, it could at least tell users what it should be.

    <img id="" src="" alt="frontendmentor-qr-code"></img>
  • Larry•170
    @lawrence-yoon

    I think that this is the perfect challenge for a beginner that is just starting out. The project only requires html and css, and requires you to understand some important fundamentals.

    For the learning experience, you should not use react or bootstrap for this project. But if you really had to use something external, the only framework/library that I would suggest for making this build process easier would be using tailwindcss. At the very least you can still learn the fundamentals of css if you become proficient with tailwindcss due to it's utility classes, and their documentation is really good.

    Having said that, I think the way you went about this challenge is probably the best/easiest way.

    Marked as helpful