I'd appreciate any feedback, helpful tips or links. I've been trying to figure out how to keep the rating circles styling to show once selected, so far no luck. Any additional feedback beyond that is also appreciated :)
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!
i found it difficult to make a span element behave like a word with equal spacing from right and left in a paragraph.
is there a simplere or easier way to do it other than specifing margin for the span?
any feed back is appreaciated.
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.
