Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactiv -rating

@arunkanaujia23

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I Created UI using CSS and bootstrap. Any Feedback welcome

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Arun Kanaujia Patel, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

Instead of using the for loop you can use the forEach method, it will do the same thing but the code will be cleaner and more readable!

old way:

for (let i = 0; i < valueRating.length;i++){
   valueRating[i].addEventListener("click",(e) => {
    V = valueRating[i].innerText;
    ratingFinal.innerText = "You selected " + V + " out of 5";
    valueRating[i].className = "active rating d-flex align-items-center justify-content-center";
   })
}

with the forEach method:

valueRating.forEach((element) => {
    element.addEventListener("click", () => {
        V = element.innerText;
        ratingFinal.innerText = "You selected " + V + " out of 5";
        element.className = "active rating d-flex align-items-center justify-content-center";
    })
})

The rest is great!

I hope it helps... 👍

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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