Skip to content
Submitted about 2 years ago

INTERACTIVE RATING COMPONENT

Elebor Henry•170
@RAY-DEV67
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

my solution to the interactive rating component!!

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • To properly center your content to your page, you will want to add the following to your <Body> Element (this method uses CSS Grid):
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    • 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.

    • The icons in this component serve no other purpose than to be decorative; They add no value. There Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

    • 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 helpful
    0
  • Adriano•38,410
    @AdrianoEscarabotePosted about 2 years ago

    Hi Elebor Henry, 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 added an event to each button manually, we can greatly shorten your code using the forEach method, for example, first strip all events from your code. Let's change the name of the button classes in html, like this:

    <button class="btnRate">1</button>

    And now let's go to js, ​​I'm going to get all these buttons and store them in a variable.

    let btn = document.querySelectorAll("btnRate")

    this variable has a NodeList with all our buttons, this NodeList has a forEach method, which interacts with each element within that list, and executes what we pass as a parameter to this method.

    btn.forEach(element => {
    element.addEventListener("click", () => {
        message.textContent = `You selected ${element.innerText} out of 5`;
        element.style.backgroundColor = "hsl(25, 97%, 53%)";
    })
})

    Remembering that I only removed the events of the number buttons, and left the submit!

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    0
    Elebor Henry•170
    @RAY-DEV67Posted about 2 years ago

    @AdrianoEscarabote Thanks for this awesome correction im still quite new to JS i would implement this

    1
    Adriano•38,410
    @AdrianoEscarabotePosted about 2 years ago

    @RAY-DEV67 happy coding!!

    0

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