Interactive Rating Component using html css javascript

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can fix these points:

  ✅ for better performance you can initially set it hidden, and after submit show it

  // Submit handler function
  function submitter(itemid) {
      document.getElementById('container').innerHTML = `
       <div class="thankyou-container">
      <div class="thankyou-img-container">
          <img src="./images/illustration-thank-you.svg" alt="thankyou img">
      </div>
      <div class="selected-rating-info">
          <h1>You selected ${Number(itemid) + 1} out of 5</h1>
      </div>
      <h1 class="thank-you">Thank you!</h1>
      <div class="thankyou-message">
          <p>We appreciate you taking the time to give a rating. If you ever need more support,
              don’t hesitate to get in touch!</p>
      </div>`
  }
  

  ✅ you can simplify it

  // Get rating elements html collection
  const ratingSelectorCollection = document.getElementsByClassName('rating-selector');
  // convert rating elements html collection into array
  const ratingSelectorArray = Array.from(ratingSelectorCollection);
  

  to this with destructing

  const ratingSelectorArray = [...document.getElementsByClassName('rating-selector')]
  

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  0