Interactive rating component created using html , css and javascript

Nice work kelly, I recommend you use a button tag instead of list tag. the background effect is done by using a pseudo class button:focus { background-color: var(--lightGrey); color: var(--white); }

Check my solution rating component

Hello Good job, you are on the correct path, there are just a few changes that might help

If you uncomment your JavaScript you will find that on click a class named toggle will be added to each item that is clicked.

This is just a class name. To style it we need to refrence that name in css using a CSS class selector.

li.loop.toggle {
background: hsl(25, 97%, 53%);
color: white;
}

Now every time an item is clicked it will reference the above styling and give it an orange background with white text.

A new problem

But wait! Notice now if we click multiple items the toggle class gets added to them all? That's because we haven't checked if the class already exists in our Javascript before adding another class.

We can fix this by implementing a check. The complete code may look something like this:

const items = document.querySelectorAll('.loop');

for(let i=0; i<items.length; i++) {
    items[i].addEventListener('click', (e) => {
        if(document.querySelector('.toggle')) {    <--------------
            document.querySelector('.toggle').classList.remove('toggle');
        }
        e.target.classList.toggle('toggle');
    })
}

Another method of styling without JS

There are many different ways of doing the same thing. For example, you could have used pure CSS with labels and radio inputs for the active styling and used JS to set the value. All preference.

input[type="radio"]:checked + label

Hope some of this helps, good luck on your future projects and learning!