Using the JS DOM to solve the Interactive Rating Component Challenge

Community feedback

• 

  Cats-n-coffee•670

  @Cats-n-coffee

  Posted over 2 years ago

  Hi Nathan!

  Great job for a first DOM manipulation project! I think you could solve your clicked class issue by using <input type="radio" > instead of 5 span elements with class switching. The radio input would give you everything you need for this project with easy way of retrieving the selected value, and easy way to style with CSS (I'm referring to this element, not sure if you're familiar with it, there is also a styling example). I think it would also be better semantics and accessible, since this input is to make the user choose one option only. You can find ways to style these (custom) by googling it, there are a lot of posts about this. I'll give some Js feedback since you said it's your first DOM project:

  • your 4 variables at the top can be const instead of let since you are not re-assigning the variables.
  • to help with your logic as you have it now, you could keep track of the clicked rating in a global variable in your script, and use that number in your submit event handler to update the rating number, that way you don't need to update the DOM before the rating was submitted. Once submitted you can update the rating number element and display the feedback state (so this would be in your submit handler, not in the click handler). The click event would update the rating number (in a variable) and toggle classes. Actually you might want to remove the clicked class on all of them, and add the one class to the selected rating after (remove all, add one). You would not be using toggle in this case, but add and remove class.
  • you can clean your code once your project is finished, remove comments, remove blank lines, ... (only blank lines in your case), it's a good habit to get into if you want to apply for jobs later!

  Great job! Hope this helps, let me know if you have questions!

  01