Design comparison
Solution retrospective
Hello everyone! 👋
I finished the Results summary component! It felt amazing to complete another challenge this month <3.
- What did you find difficult while building the project?
The responsiveness of the website, I can't make the page responsive. If you have any ideas please feel free to correct me. Also the part where if you click the submit button "Thankyou" component will display it took me hours before I solve that : >
- Which areas of your code are you unsure of?
The responsiveness of the website I can't make the page responsive. If you have any ideas please feel free to correct me.
- Do you have any questions about best practices?
About the responsiveness please feel free to input your best practices so I can apply this challenges and also for the future projects/challenges.
Community feedback
- @Phenics13Posted over 1 year ago
Hi. I looked at your solution and have some suggestions.
- to make component responsive, you use media queries and that is the only way to make component responsive. However, you can also use some properties in
%
value to make it stretch,max-width
andmax-height
. - to make appear or disappear "Thankyou" component use useState hook in the parent component(
<App/>
) instead of doing it in<Ratings> component
. Also learn more about different hooks in React.
const [isSubmitted, setIsSubmitted] = useState(false) // in the App return block: return ( {!showThankyou ? <Ratings/> : <Thankyou/>} );
- add guard function that prevents user from submitting with 0 rating (because you can not pick zero) and only submit when any value 1-5 was picked.
if (!selected) return;
- to prevent props drilling you can use React Context (for selected number, for example)
Hint: you can look at my solution of this challenge. It contains everything that I have mentioned here
Marked as helpful0 - to make component responsive, you use media queries and that is the only way to make component responsive. However, you can also use some properties in
- @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.
HTML 🏷️:
- This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to
non-semantic
markup, which lack landmark for a webpage
- So fix it by replacing the
<div id="root">
element with the semantic element<main>
in yourindex.html
file to improve accessibility and organization of your page.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>
or<span>
- They convey the structure of your page. For example, the
<main>
element should include all content directly related to the page's main idea, so there should only be one per page
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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