Rating Component - HTML, CSS and JS

Community feedback

• 

  Rémy Boiré•350

  @remyboirePosted over 2 years ago

  Hi @jplawrence ! This looks great, really well done ! Here is what I personnaly wrote : buttons.forEach((element) => { element.addEventListener('click', () => { buttons.forEach((element) => { element.classList.remove('selected') }) element.classList.add('selected') }) }) This is not as repetitive as your method, plus, adding and removing a class is easier to maintain as colors and styles remains in the CSS file.

  Marked as helpful

  0

  ---

  

  Kelvin•915

  @Kl3vaPosted over 2 years ago

  @remyboire You can use .toggle to add and remove classes

  0

  

  Rémy Boiré•350

  @remyboirePosted over 2 years ago

  @Kl3va I used .toggle once, but I didn't manage to make it work with 5 elements, as it revert classes. What I want is to remove class of the already selected element, and add class on the clicked element. My code indentation doesn't make it easy to read, its “if you click on an element, remove class for all elements, and add class on the clicked element”. If you have a better syntax, I would love to hear your solution :)

  0

  

  Kelvin•915

  @Kl3vaPosted over 2 years ago

  @remyboire Alright. A better way would be to use event delegation(attach the handler to the parent container, listen for where the event occurred using the e.target), check if it contains the class/or not… then eiether add or remove

  0

  

  Jp Lawrence•40

  @jplawrencePosted over 2 years ago

  @remyboire Hey! Thanks for the code! So I'm not entirely sure as to the methods/functions used here, but I can pick up that you're basically just adding and removing a classlist which can be styled seperately.

  Just a couple things quick...I've never heard of the forEach method, but I'm guessing it selects all elements that are the same...and then the arrow function just adds a classlist on click? I'm not quite sure why you first remove the classlist and then add it, but I'll play with this in a codepen and see it in action! Again, thanks for your feedback!

  0
• 

  Daniel Ramírez•120

  @danyrszzPosted over 2 years ago

  i have problems with my html semantics but i can help with the JS part:

  you can add the same class to each one of your li elements, then do a querySelectorAll to assign each one of them to an array, then you can do two things: either add an eventlistener to the ul element (container) to manage each one of the li clicks, or add an event listener to each one of li elements, so that when you click you can have the exact clicked element and you'll be able to do something like "event.target.classList.add("selected") where selected will have the desired background color, then to remove the previous selected element you can at each click traverse the array and do something like "event.target.classList.remove("selected") for each li element.

  This way you write the event just once and you can add as many elements as you like without having to touch the js.

  That's kinda the way i did it, hope i made myself clear

  Marked as helpful

  0

  ---

  

  Jp Lawrence•40

  @jplawrencePosted over 2 years ago

  @danyrszz Hey! Thanks so much for your feedback! I forgot to mention that I basically know 0 JavaScript...I just used some python concepts here (that was probably noticeable in my code), but I see what you're saying! I'll go play around with this concept in a codepen and see what I make of it. You're definitely making sense :) Thanks for your help!

  0
• 

  Kelvin•915

  @Kl3vaPosted over 2 years ago

  You can start by doing a little research on event delegation and propagation. Then, use only one function to handle the change of color by assigning an active class when clicked other than calling different functions to do the exact same thing.

  0

  ---

  

  Jp Lawrence•40

  @jplawrencePosted over 2 years ago

  @Kl3va This sounds very handy! I will go research on this most definitely and see what I come up with! I saw your reply on toggling classes also, and that seems appropriate here! So I'll check that out too! Thanks :)

  1