Html/Css/Js used and it was a good example for learning DOM

Solution retrospective
It is not responsive yet. You can suggest ideas and make corrections, feel free!
Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
Hey there! 👋 Here are some suggestions to help improve your code:
- Change
width
tomax-width
in your component’s container to make it responsive. You will also want to delete theheight
as it is unnecessary.
- The “icons/images” in this component serve no other purpose than to be decorative; They add no value. There
alt Ttag
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
- Currently, users can submit without selecting a rating. To fix this, you can do one of the following:
- Make the “5” rating the default rating.
- Create an error message, telling users they need make a section.
- Disable the button until a selection is made.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful - Change
- @AdrianoEscarabote
Hello furkan, 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', () => { rate.style.backgroundColor = 'grey'; rate.style.color = 'white'; rating.innerHTML = rate.innerHTML; submitButton.addEventListener('click', () => { mainContainer.style.display = 'none'; thanksContainer.style.display = 'flex'; }); }) })
The remainder is excellent.
I hope it's useful. 👍
- @Cristhyam-Augusto
Hi Furka how are you?? Congratulations on the design, it was really identical. I did a project like this yesterday, and I got some feedback that might be useful for you too: I noticed that I can send a review even without filling in the value, so you can change the code as below to avoid this.
rate.addEventListener("click", () => { rate.style.backgroundColor = "grey"; rate.style.color = "white"; rating.innerHTML = rate.innerHTML; submitButton.addEventListener("click", () => { mainContainer.style.display = "none"; thanksContainer.style.display = "flex"; }); }); });
I also noticed that in the html you used ID and class references for the LI, but I don't think that's necessary, because you used only classes in css. In general I think that's it, congratulations on the work, it was really good.
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