Skip to content
Submitted over 2 years ago

Interactive rating component

Bazthos•430
@Bazthos
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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 !

Community feedback

  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 2 years ago

    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
    1

Please log in to post a comment

Log in with GitHub

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