Interactive Rating Component Using Flexbox, Grid and Basic JS

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Fernando Mendoza, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  We can shorten the code a lot, using some useful methods! Instead of using a variable for each element, I'll use querySelectorAll, to get all the elements of the .rating-values class:

  const ratingNumbers = document.querySelectorAll(".rating-values")

  I'm going to remove all the events that were associated with the variables that we removed! and I will also remove all checkedToggle functions.

  Right to make the functionality we will use the forEach method in our ratingNumbers variable, which will go through all the elements that are in it and will add a click event, which we will pass to a function performing some operations:

  ratingNumbers.forEach(element => {
    element.addEventListener("click", () => {
      // code block
    })
  })
  

  To make sure we can resolve the class we will add this inside the event code block:

  ratingNumbers.forEach(element => {
     element.classList.remove('clicked');
  })
  element.classList.add("clicked")
  

  OK, after we've done that, let's get the button's number and we'll add a feature that the .primary-button button will only call the page change event when the user selects some number!

  value = element.innerText
  button.addEventListener('click', function () {
    score.innerText = value;
    ratingContainer.classList.add('inactive');
    feedbackContainer.classList.remove('inactive');
  });
  

  That's it, I hope that's clear!!

  if you want i can give a pull request on github with the complete code

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Fernando Mendoza•160

  @whiteknight-devPosted about 2 years ago

  @AdrianoEscarabote Thank you very much, I appreciate it, this help me a lot to learn and improve, I already have made those change but you can give your github username to acknowledge you that part of the code.

  0
• 

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  Hi there! You did good, and if you allow me, I have some suggestions to make. Firstly, wrap all your index.html code, in a main tag. Secondly, you do not have to create a function specifically for one button at a time, you can select them all through document.querySelectorAll() and apply .forEach() method, for example. You can take a peek at my solution : ) These are the first steps. Please fell free to reach me out and we can work together! Kind regards!

  Marked as helpful

  1

  ---

  

  Fernando Mendoza•160

  @whiteknight-devPosted about 2 years ago

  @WebDevCampos thank you very much, I would like to work with you for sure 😄.

  0