QRcode component solution

Congratulations on completing the challenge!🎉. That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. It looks like u have forgot to add images folder so you need to add an images folder for displaying the qrcode image

To add an images folder to your GitHub repository, you can follow these general steps:

Ensure that you have the images folder on your local machine, containing the images you want to add. Open your repository on GitHub. Click on the "Add file" button and choose "Upload files" from the dropdown menu.

Drag and drop the images folder from your computer into the file upload area. Add a commit message describing the changes you made (e.g., "Added images folder"). Click on the "Commit changes" button to upload the images folder to your repository. And also change the path of image the path u have provided is not correct one

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

BROKEN QR iMAGE 📸:

• The qr image file is missing on your repository so that the image is failed to load, so try to add the image to repository as soon as possible to resolve this issue

CSS 🎨:

• Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

• We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component.

body {
min-height: 100vh;
display: grid;
place-items: center;
}

• Now remove these styles, after removing you can able to see the changes

main {
margin: 32px auto;
}

• Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

GitHub Pages can run into issues with relative links. In my experience the link will break if it is for example: /images/image-qr-code.png, the fix to get the image working is to add a period in front to allow the right folder to be found: ./images/image-qr-code.png