QRcode component solution

Community feedback

• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  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

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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!

  Marked as helpful

  0

  ---

  

  Abdul-Hakeem Abiola•200

  @Boboniyen01Posted over 1 year ago

  I really appreciate your help , I love the way you explained . Why is the html error is still showing after I have corrected the code ? @0xAbdulKhalid

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @Boboniyen01, Can you provide the name of error which is showing to you ?

  Because other peoples can't see the errors which was generated for your solution

  0

  

  Abdul-Hakeem Abiola•200

  @Boboniyen01Posted over 1 year ago

  ERRORBad value "C:\Users\abdul\OneDrive\Documents\qr code front end mentor\images\image-qr-code.png" for attribute "src" on element "img": Illegal character in scheme data: "" is not allowed.v id="qr"><img src="C:\Users\abdul\OneDrive\Documents\qr code front end mentor\images\image-qr-code.png" alt="QR code" width="600px" height="500px "></div>

  ERRORBad value "600px" for attribute "width" on element "img": Expected a digit but saw "p" instead.v id="qr"><img src="C:\Users\abdul\OneDrive\Documents\qr code front end mentor\images\image-qr-code.png" alt="QR code" width="600px" height="500px "></div>

  ERRORBad value "500px " for attribute "height" on element "img": Expected a digit but saw "p" instead.v id="qr">

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Just try to generate a new report @Boboniyen01

  You can generate a new report by clicking the navy blue button on your right hand side top of the design comparison section

  0
• 

  jamespask•60

  @jamespaskPosted over 1 year ago

  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

  0