Interactive rating component created using html , css and javascript

Community feedback

• 

  Morin Sultan•310

  @SoulOfMoPosted over 1 year ago

  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

  1

  ---

  

  Kelly Agbonifo•90

  @kellynickPosted over 1 year ago

  @SoulOfMo Thank you so much. I did what you told me to do and it worked . Simple and straight forward. Thank you 🙏🙏🙏

  0

  

  Morin Sultan•310

  @SoulOfMoPosted over 1 year ago

  Glad, I could be of help. @kellynick

  0
• 

  Carl•855

  @CarlHummPosted over 1 year ago

  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!

  0

  ---

  

  Kelly Agbonifo•90

  @kellynickPosted over 1 year ago

  @CarlHumm Thanks for your response I had issues implementing the JavaScript. It still didn't work but someone suggested I use button . Which I did then I used :focus pseudo class and it worked. Thanks for your feedback 🙏🙏🙏

  1