Skip to content
Submitted over 1 year ago

QR component | ReactJS | Vite

accessibility, react, vite
Mayank Arora•430
@mayankdrvr
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi Frontendmentor community,

This is my QR component beginner challenge solution in ReactJS. I had previously submitted a vanilla JS solution of the same challenge and had learned a lot from the feedback i had received. Initially, i was having trouble loading the image in my project. I learned that it is a good practice to put static image files in the src folder instead of the public folder and the src attribute in the <img> element in React component uses a 'require' keyword in case the image files are in src folder.

An issue i found in this submisson is that below 318px width of screen, the container and image do not resize and the text does not wrap. According to my understanding, max-width styling property is not working as designed. Also, the HTML validation report is showing the following errors on the challenge submission page on FEM-

ERROR
Element "meta" is missing one or more of the following attributes: "content", "itemprop", "property".
en"><head><meta charset="UTF-8"><meta
ERROR
A document must not include more than one "meta" element with a "charset" attribute.
en"><head><meta charset="UTF-8"><meta
ERROR
Attribute "name" not allowed on element "meta" at this point.
t="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link
ERROR
Element "meta" is missing one or more of the following attributes: "itemprop", "property".
t="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link
ERROR
Element "title" not allowed as child of element "div" in this context. (Suppressing further errors from this subtree.)
ylesheet"><title>Fronte
ERROR
Stray end tag "head".
tyle.css"></head><body>
ERROR
Start tag "body" seen but an element of the same type was already open.
s"></head><body><main
ERROR
End tag for "body" seen, but there were unclosed elements.
></footer></body></html
ERROR
Unclosed element "div".
id="root"><div class="App"><html
ERROR
Unclosed element "div".
/noscript><div id="root"><div c
ERROR
Stray end tag "div".
y></html> </div></div>

Do you think these errors are due to me uploading the build folder in ReactJS to netlify deployed site using drag and drop method as i saw that the files in the build folder have continous text without any line break or spacing? I would be highly grateful if someone could guide me to rectify these issues.

I request the community to review and give feedback for the live site and the shared source code on the following parameters-

  1. Does it follow all the good web accessibility practices?
  2. Is the site mobile first and responsive on all devices?
  3. Do you have any other code refactoring suggestion with respect to ReactJS best practices?

Please feel free and do not hesitate to review my code and do give feedback for improvement. All suggestions are welcome. Waiting to learn from your feedback and experience. Thank you for reviewing my challenge submission.

Code

Please log in to post a comment

Log in

Community feedback

  • Mayank Arora•430
    @mayankdrvr

    UPDATE:

    1. I have refactored this challenge using Vite as Create React App(CRA) is deprecated.
    2. All issues resolved in Accessibility report & HTML validation report on challenge submission page on FEM.
    3. The styling has been updated according to the feedback received on FEM discord to make the site responsive.
    4. Source code and preview site has been updated.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord