Design comparison
Solution retrospective
Your feedback is valuable to me!
How can use addEventListener() with querySelectorAll("#rating")? The code is written in rating.js (https://github.com/AmitKumar-001/Project-From-Frontend-Mentor/blob/main/Interactive-Rating-Component-Main/rating.js) gives some errors in the console.
Community feedback
- @mikedsousaPosted 12 months ago
Hey AmitKumar, how you doing? I read your code and I have some things to talk about. Just like you I started to code a few couple months ago, so if a say something wrong, I'm sorry (laughing in brazilian).
-
First, your HTML
- It's not a good practice to use the same ID in more the one element (line 34-38).
- Instead of using ID, you should use classes which is the semantic form
- You can read more about semantic html here
-
CSS
- You can use the pseudo class :hover to change the color of the button when the pointer is hovering and :active when the button is clicked instead using javascript for that
-
Your script
-
About querySelectorAll(), I did the same has you, but I use classes and not ID
-
About addEventListener(), I used click event and a for loop to verify which button was clicked and setTimeOut to return to the first page
for (let i = 0; i < BUTTONS.length; i++) { BUTTONS[i].addEventListener('click', ()=> { SUBMIT.addEventListener('click', () => { MAIN.classList.replace('show', 'hide') RATED.classList.replace('hide', 'show') SCORE.innerText = `You selected ${BUTTONS[i].value} out of 5` }) setTimeout(function() { RATED.classList.replace('show', 'hide') MAIN.classList.replace('hide', 'show') }, 5000) }) }```
-
- There are some other things I would like to comment on, but my English is limited and I don't think I can be clear enough
Marked as helpful2 -
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