Skip to content
Submitted about 3 years ago

Interactive rating component

Bazthos•430
@Bazthos
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

First time using JavaScript :

  • I was looking to apply an EventListener directly on each <p> inside <div> container, but when I've get all Element, I've a HTMLCollection list. My question : how can I focus each element of this list ? I use forEach loop but can't add an EventListener on each iteration

  • Is it possible to group all my similar objects (one, two, three...) and apply the same EventListener schema to them all?

Give me any advice (even on writing code in general) as a beginner I am keen on any information, thanks in advance !

See you Everyone !

Code

Please log in to post a comment

Log in

Community feedback

  • Fazza Razaq Amiarso•2,320
    @fazzaamiarso

    Hello, Bazthos! You've done great!

    I want to tell you something that can help your code:

    1. If you want to style on hover, you don't need to use pointerout and pointerover. In CSS, there is :hover pseudo class that will apply styling on hover. So, in your case, you can do .rate:hover {}. https://developer.mozilla.org/en-US/docs/Web/CSS/:hover .
    2. If you want to attach event on a list of child. You can use a technique called 'Event delegation'. By using event delegation, you only need to attach the event to the parent and conditionally trigger the child. Here is a deeper explanation

    Hope that helps! Goodluck with your journey!!

    Marked as helpful

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