Interactive rating component

Community feedback

• 

  Osama Elshimy•140

  @Osama-Elshimy

  Posted over 2 years ago

  Nice Work!

  You asked for a way to implement the select rate part. Here is how I did it:

  • Give the span element an id or a class like you did, you gave it an id='rate'
  • Select the element in JavaScript:

  const rate = doqument.getElementById('rate')

  • Select all the button elements like you did my friend:

  const btns = doqument.querySelectorAll('.btn')

  • Add event listener to a common parent element btn-list

  document.querySelector('.btn-list').addEventListener('click', function(e)) {
  // Determine what element caused the event - what button was clicked
  const clicked = e.target.closest(".btn");
  
  // return if no button is clicked - if the user clicks on the list button but NOT on a button 
  if (!clicked) {
      return
  }
  
  // Assign the value of the clicked button to the span element
  rate.textContent = clicked.textContent // No space 
  
  // You can add space before the number by using bracket notations like this:
     rate.textContent = ` ${clicked.textContent}` // There is a space
  }
  }
  

  • Final step: When you click the submit button. You have to make sure that the user chooses a rating:

  // return if NO rating was chosen - No button is clicked
  // If no rating was selected, then the value will be null
  if (!rate.textContent) {
     return
  }
  

  The UI is very nice, but you must improve the semantic HTML. Use form instead of ul

  If you need more help on the JavaScript part, feel free to reply and I'll be glad to help.

  Happy coding :)

  00