Interacting rating component with Basic JavaScript

Community feedback

• 

  WandoCode•840

  @WandolePosted over 1 year ago

  Hey!

  As a user, I would like to actually see the choice I made when I click on a number. You should give a different style to the button when it's clicked. Talking about the button, in your code there is a list of choices (from 1 to 5): from an HTML point of view it's look a lot like radio inputs! You should try to use that instead of multiple buttons. It will also help you for the style of the selected value! You will need to make some search to understand how to style radio inputs but it's worth it because you will use it A LOT in your next projects.

  The style in general looks very good! Maybe try to center better text in buttons? You should try to use Flexbox for that for example.

  And for all your project, avoid using a fixed width (% is okay though but don't fit in all the situations) because you will have overflow issues with that on small screen sizes! It's not an issue in that project though :) Instead, use max-width as soon as you can! Same for height => use min-height.

  Sometime fixed size is mandatory, but when it's not, don't use them, it will save you a lot of time!

  I hope it help!

  0

  ---

  

  Yael•140

  @yaeltwPosted over 1 year ago

  @Wandole Thanks you for your feedback, i really appreciate it! About the button feedback when you press it, yes i think that as well but i couldn't do it, i tried and i couldn't make it work, i was trying with only css and then javascript but nothing, i really need help with that issue hahaha

  0

  

  WandoCode•840

  @WandolePosted over 1 year ago

  @yaeltw If you use the button tag, you have to track which one is clicked in JS.

  I wrote this quickly (no tested) to give you an idea of how to do it with JS:

  const buttonsHTML = document.getElementsByClassName('numbers-container')[0].children // getElementsByClassName gives you a HTMLcollection with 1 item (=>[0]) and I need the buttons inside (=> .children)
  const buttonsArray = Array.from((buttonsHTML)) // buttonsHTML, again, is HTMLcollection => It doesn't have the "forEach" method as arrays. I change it to an array so I can use "forEach"
  
  let selection // Keep track of the choosen value and make it usable outside handleClick
  
  const handleClick = (e) => {
      const value = e.target.innerText
      
      selection = selection === value ? undefined : value // When the user click on the button already selected, it remove the selection
  
      buttonsArray.forEach(buttonNode => {
        // Same here with the 'toogle', remove the class when user clicked on the already selected button
        buttonNode.innertext === value ? buttonNode.classList.toogle(('selected')):buttonNode.classList.remove(('selected'))
      });
  
  }
  
  buttonsArray.forEach(buttonNode => {
    buttonNode.addEventListener('click', handleClick)
  });
  
  

  Now you can style the button with the 'selected' class!

  It's quite a lot of JS for the solution, maybe it can be shorter, but the shortest is no JS at all. And you can do it without JS if you use radio inputs ;-)

  Marked as helpful

  0

  

  WandoCode•840

  @WandolePosted over 1 year ago

  @yaeltw The solution with radio inputs (the idea):

  You can't style the radio input itself. The solution is to hide the input but to link a label to it and style the label. When it's done, when the user click the label, it change the value of the input linked. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

  To style the selected input, you can use the CSS selector ':checked' : https://www.w3schools.com/cssref/sel_checked.php

  Marked as helpful

  0

  

  Yael•140

  @yaeltwPosted over 1 year ago

  @Wandole Wow! Thank you so much for this information, i really appreciate it. Im gonna put it to practice!

  1