Design comparison
Solution retrospective
Any feedback is appreciated! I only have one question, is there a better practice instead of repeating positioning?
Thanks!
- Tyler
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hello Tyler, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
To make the submit button work only when the user selects a number, we can do this:
rates.forEach((rate) => { rate.addEventListener('click', () => { amountedSelected.innerText = `You selected ${rate.innerHTML} out of 5` submitRating.addEventListener('click', () => { ratingState.classList.add('hidden') thankYouState.classList.remove('hidden') }) }) })
The remainder is excellent.
I hope it's useful. 👍
Marked as helpful1@Tyler430Posted almost 2 years ago@AdrianoEscarabote Should I display an “error” message if they try to click just submit if no number is selected? And could I do it that in vanilla HTML? I know there is a way if I used React or any other libraries.
1@AdrianoEscarabotePosted almost 2 years ago@Tyler430 you can do this with js!
Marked as helpful1 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The “icons/images” in this component serve no other purpose than to be decorative; They add no value. There
alt tag
should be left blank and have anaria-hidden=“true”
to hide them from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The proper way to build this challenge is to create a
form
and inside of it, the “rating buttons” should be built using aninput radio
(wrap all of them inside afieldset
), since this will prevent additional buttons from being active at the same time, and it should have alabel
element attached to it for accessibility.
More Info:📚
MDN <fieldset>: The Field Set element
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1 - The “icons/images” in this component serve no other purpose than to be decorative; They add no value. There
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