Design comparison
Solution retrospective
Second project completed and also first time using JavaScript
Are there any accessibility issues?
Is there any way to improve my JS code?
Thanks for your help.
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the <Main> Element.
-
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 proper way to build this challenge is to create a Form and inside of it, the “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🍂🦃
Marked as helpful0 -
- @AdrianoEscarabotePosted about 2 years ago
Hi BlunderBarry, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
I noticed that you were adding events to each button manually, we can do this same functionality but in a faster and smaller way.
First we will strip all events from these
numbers
.Removed:
numbers[0].addEventListener
after that, we will use the
forEach
method, it will loop through all the buttons in ourNodeList
that is inside the variable, and what we pass as a parameter it will execute on each element, like this:numbers.forEach(element => { element.addEventListener("click", () => { rating.innerHTML = "You selected " + element.innerText + " out of 5" }) })
do the test!!
The rest is great!
I hope it helps... 👍
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