Interactive Rating Componenet | first crack at challenge with JS
Design comparison
Solution retrospective
Props to this guy. Programming is not easy. I recommend working with and following a code-along until you have enough skills to build on your own. https://www.youtube.com/watch?v=L9HElpQ82KA&list=PL5OIANLlPydqJJqvh1J1NCdNFaKZLoqaz&index=1
Below, why does btn appear twice and what is it doing? Is it calling itself? Recursion?
rating_btn.forEach( btn => { btn.addEventListener('click', handleRatingBtnClick) })
Community feedback
- @TomTillyPosted about 2 years ago
Good job funupulu!
Regarding your question, the
rating_btn
variable is a NodeList (similar to an array) of potential button elements. TheforEach
method loops through the NodeList and calls the callback functionbtn => { btn.addEventListener('click', handleRatingBtnClick) }
for each item in the NodeList.btn
is whatever button in the array the loop is currently on. Arrow function syntax was used here, but it could have also been written like this:rating_btn.forEach(function(btn) { btn.addEventListener('click', handleRatingBtnClick); });
In the function body, an event listener is being added to listen for a click on the button. When the button is clicked, the
handleRatingBtnClick
function is called. Hope that 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