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

Mobile-first solution using SASS

#sass/scss

@lidiakrajewska

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Jose Cruz 70

@machetio7

Posted

Great work!.

You can use JavaScript to add classes.

const items = document.getElementsByClassName("ranking__score__element");

for (let i = 0; i < items.length; i++) { items[i].addEventListener( "click", function () { items[i].classList.toggle("button__active");

  //remove class in the other elements in the array ranking__score
  const options = document.getElementsByClassName(
    "ranking__score__element"
  );
  for (let index = 0; index < options.length; index++) {
    if (index !== i) {
      options[index].classList.remove("button__active");
    }
  }
},
false

); }

0

@lidiakrajewska

Posted

@machetio7 Thanks! I know, I applied a similar concept with forEach loop, but with each click event active class is removed from all elements and then added only to the one that was recently clicked. But your approach with checking it with if condition is a good idea.

0
P
AK 6,700

@skyv26

Posted

Good Work !! Keep it up.

0

@lidiakrajewska

Posted

@skyv26 Thanks a lot!

1

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