Skip to content
OverviewSolutions
8
Comments
2
Haminimuri
@Kiranchai

All comments

  • Haminimuri•200
    @KiranchaiPosted about 2 years ago

    Hey, I like your solution for this challenge.

    When I was reading your feedback, I was like 'hell yeah, thats exactly what i was struggling with'. It took me hours and hours before I placed the cards and its contents correctly. I think the biggest difficulty in this challenge, is to correctly use 'position: absolute' don't you think?

    The way I've done this challenge with a satisfactory result, was to divide the main content (cards, form) into equal containers with use of 'display: grid' layout. Then I positioned the cards with 'top, left' in 'position: absolute' properties. It made them look reasonably big and then I started to style the form.

    The next step was to create a media query, to display the containers vertically. I was struggling with the size of those cards, so I've used 'transform: scale()' property which helped me tremendously.

    I would also suggest you, to try making the red popups appear on 'outfocus' event. In my opinion it is more friendly for the user if he knows instantly that the input is wrong.

    I like that your solution helps the user with card number input by adding the space on its own. I wanted to see how you've made it but unfortunately I cannot see your code. Looks like you had to incorrectly paste the link to the repository.

    Anyway, you've done a pretty good job with the project and if you had any more questions don't be afraid to ask, you can also check out my solution for this challenge. Good luck and keep up the good work! :)

    Marked as helpful
    0
  • Haminimuri•200
    @KiranchaiPosted about 2 years ago

    Hey, I liked your solution for this challenge.

    I would recommend you using 'forEach' loops instead of 'for' loops in these situations. I find it easier to read and it makes the JS file less complicated. There are several examples that will make it easier for you to understand: https://www.freecodecamp.org/news/javascript-foreach-js-array-for-each-example/

    Also, I've done this challenge with use of 'forEach' loop, you can check it out in my solution.

    Good luck in your future projects. Keep on!

    Marked as helpful
    0