Skip to content
OverviewSolutions
10
Comments
2
Prince Chukwu
@cprincec

All comments

  • Prince Chukwu•250
    @cprincec

    Hi Denise, you did a great job on the UI.

    One way you could keep the style for selected rating is to add a class to any of the ratings (circles) selected and remove that class from any other circle it may be applied to. Then in your css file, you can define the styles for that class.

    Here is a little example of what I mean. Assuming you have this html for the possible ratings:

    <ul> 
<li class="rating">1</li>
<li class="rating">2</li>
<li class="rating">3</li>
<li class="rating">4</li>
<li class="rating">5</li>
</ul>

    Now in your JavaScript file you could add click event listeners to each 'li' so as to assign a class to the clicked 'li'. Thus:

    const ratingElements = document.querySelectorAll(". rating");

ratingElements.forEach(element => element.addEventListener("click", (e) => {

// Remove the unique class from all the rating buttons
ratingElements.forEach(li => li.classList.remove("selected"));

// Add the unique class only to the clicked element 
e.target.classList.add("selected");
});

    Now in your css file you could now style the element with class of selected as you wish. Example:

    . selected {
background-color: orange;
color: black;
}

    Good luck!

    Marked as helpful
  • Prince Chukwu•250
    @cprincec

    Hi,

    The difficulty you have in adding a single whitespace on the left and right side of the dynamic rating number is due to the 'flex' display you set to the parent 'section' element (with class of bubble). Take that (flex) out then single whitespaces will work properly around the number.