interactive rating component main using HTML, CSS and Vanilla Js

Hey Rebeitte! Congratulations on completing this challenge! It looks really sharp and I hope you had fun completing it. 👏 Here's a few pointers:

• To answer your question, you might want to add an id tag to the <span> that contains the number 4 in your html. Then you can select that span in your javaScript using document.querySelector( '#element' ) or whatever selector you are comfortable with. So you need to save the value of the button selected by the user in a variable and set that variable as the innerText property of the <span> in your javaScript. To know a little more on innerText, follow this link

Happy coding and keep up the good work 👍

Hey Rebeitte, I also had a look at your code and the component, and I found that while the selected number does change the background color, it doesn't change back when another number is selected, which means that if I take turns clicking on all the 5 buttons, all of them would end up gray, which would not be like the design. Ideally, only the most recently clicked one would remain gray. I see that you're using toggle in your JS; what that means is that, the class would get added or removed depending on whether the button is clicked, but it doesn't get added/removed if other buttons are clicked.

To solve this problem, you'd have to add another iterator in your loop; I've added a forEach() function here for simplicity, which you'll see below. Just to follow Tesla_Ambassador's suggestion above, I've added a line here to show how you can show the score; you can take the number directly from the clicked items element using textContent and then just add that to the textContent of the <span> tag.

First, add an id in your HTML within the <span> tag:

<p class="rank-select">
  You selected <span id="score">4</span> out of 5
</p>

Then try this in your JS:

const scoreEl = document.getElementById('score');

for (let i = 0; i < ranks.length; i++) {
  ranks[i].addEventListener('click', function selecting() {

    // this would remove the style class from all the items first, kind of like a reset
    ranks.forEach((rank) => rank.classList.remove('number_selected')); 

    ranks[i].classList.add('number_selected');

    ranks[i].style.color = 'white';

    // This would add the number to the span tag
    scoreEl.textContent = ranks[i].textContent
  });
}

Hope this helps!