HTML, CSS, Javascript

Community feedback

• 

  Manuel Gil•340

  @ManuGil22Posted over 2 years ago

  Hey there @peta !

  What i did was to create a class called --checked. With css added there all the styles for the rating buttons when clicked. Then with js, in the eventListener for rating, removed the class --checked for all rating buttons, and added it to the one clicked.

  • CSS

  .rate-btn--checked {
      background-color: hsl(217, 12%, 63%);
      color: hsl(0, 0%, 100%);
  }
  

  • JS

  rateBtns.forEach((btn) => {
  	btn.addEventListener('click', (e) => {
  		// removes checked class from all rating buttons
  		rateBtns.forEach((button) => {
  			button.classList.remove('rate-btn--checked');
  			button.ariaChecked = 'false';
  		});
  		// adds checked class to clicked button
  		e.target.classList.add('rate-btn--checked');
  		e.target.ariaChecked = 'true';
  	});
  });
  

  • Also if u can try to add and alternative text to the <img> tags. Its a description of the images for the screenreaders!

  Well done and keep coding!

  0

  ---

  

  Manuel Gil•340

  @ManuGil22Posted over 2 years ago

  You can also change the background color of the buttons to fix your solution, so u dont have to change much.

  ratings.forEach((rating)=> {
      rating.addEventListener('click', ()=>{
          ratings.forEach((ratingBtn)=> {
                  ratingBtn.style.background = "hsl(215, 17%, 22%)";
          }
          ratingNmb.textContent = rating.textContent;
          rating.style.background = "hsl(216, 12%, 54%)";
      });
  }); 
  

  I think that should work same way to fit ur solution. Not really sure if hsl(215, 17%, 22%) its the correct color tho 🙃

  Marked as helpful

  1