Responsive Interactive Rating Component

Community feedback

• 

  Osama Elshimy•140

  @Osama-ElshimyPosted almost 2 years ago

  Nice work!

  Here are how I did the JS event listeners:

  • Select the parent element of the rating buttons like you did my friend:

  const ratingList = document.querySelector(".rating-group"");
  

  • Select all the rating buttons together:

  // This will choose all the button elements and give you a Node List 
  const ratingBtns = document.querySelectorAll(".rating-btn"); 
  

  • Select the span element with the rating-value class:

  const selectedRate = document.querySelector(".rating-value");
  

  • Select the form:

  const form = doqument.getElementById('form');
  

  // Select rating handler
  //  1. Add event listener to common parent element - (ratingList)
  ratingList.addEventListener("click", function (e) {
  	e.preventDefault();
  
  	//  2. Determine what element caused the event - Very important step
  	const clicked = e.target.closest(".rating-btn");
  
  	// Gaurd Clause - return if no button is clicked
  	if (!clicked) {
                return;
          }
  	// console.log(clicked);
  
  	// Remove active class from all buttons
  	ratingBtns.forEach(btn => btn.classList.remove("active"));
  
  	// Add active class to clicked button
  	clicked.classList.add("active");
  
  	// Assign rate to clicked button value
  	selectedRate.textContent = ` ${clicked.textContent}`;
  });
  
  
  // Submit form
  form.addEventListener("submit", function (e) {
  	e.preventDefault();
  
  	// Make sure a rating is selected
  	if (!selectedRate.textContent) {
  		console.log(`You must Choose a rate!`);
  		return;
  	}
  
  	console.log("Submitted");
  
  	// Hide rating container
  	ratingContainer.classList.add("hidden");
  
  	// Display thank container
  	thankContainer.classList.remove("hidden");
  });
  
  

  The rating part is possible because of something called event propagation. You can read more about that here:

  [Event Propagation] (https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php)

  Overall that was a great job on the UI, you just need to refactor the JS code.

  If you find this helpful, click on the Mark as helpful button.

  Happy Coding

  Marked as helpful

  0
• 

  P

  Ahmet Rusen Karaoglu•30

  @ARKaraogluPosted almost 2 years ago

  Hi everyone,

  Please excuse the screenshot above. For some reason my hidden contents are also being made visible in the screenshot.

  • Ahmet

  0