Tip Calculator App using HTML, CSS, Flexbox, and JavaScript

Community feedback

• 

  turtlecrab•550

  @turtlecrabPosted over 2 years ago

  Hey great job, it looks really close to the design!

  Addressing your question - there are several inaccuracies in your code:

  • your query selector parameter string looks like you are up to grab labels for radio inputs(correct query for this case would be querySelectorAll('.percent-input + label')), but you actually don't need labels, you need to uncheck the inputs themself! So query request here should be simply querySelectorAll('.percent-input')
  • querySelectorAll returns a list of nodes, so you can't just use methods like .classList.remove on it, you need to iterate over the list and do all the stuff in that loop
  • checked is not a class, it's a property of an input, so to remove it we just set it to false

  So the working solution I've come up with is:

  customTip.addEventListener("click", function () {
    const radioInputs = document.querySelectorAll(".percent-input")
    radioInputs.forEach(input => input.checked = false)
  });
  

  I hope that helped!

  Marked as helpful

  1

  ---

  

  Allyson S.•190

  @allyson-s-codePosted over 2 years ago

  @turtlecrab Thanks so much!!! This was so helpful. At one point I tried querySelectorAll('.percent-input') but I did not understand that it returned a list of nodes and the need for the loop. And that checked acts as a property of input.

  Thanks so much for taking the time to provide feedback. I really appreciate it!!!

  Allyson

  0

  

  turtlecrab•550

  @turtlecrabPosted over 2 years ago

  @allyson-s-code It's also worth mentioning that querySelectorAll returns not an array but a special NodeList object. Which conveniently has forEach method just like an array, but it doesn't have methods like map, reduce or filter so if we want to use these we need to convert it to an array via Array.from(nodeList) or spread [...nodeList]

  I'm really glad my comment did help! I actually just recently learned these dom and query related details, before that I was as confused as you were, so I'm happy to share the knowledge! Also they say the best way to learn something is to teach it :)

  Marked as helpful

  0

  

  Allyson S.•190

  @allyson-s-codePosted over 2 years ago

  @turtlecrab thanks so much! I'll try to spread the knowledge as well! :)

  0