Tip Calculator App Solution

Community feedback

• 

  Grego•1,310

  @Grego14Posted 7 months ago

  Hello! 🎉 congratulations on completing the challenge! 🎉

  I have found a bug.

  When you only select a tip, write in the bill input or write in the people input without filling out all the inputs and choosing the necessary tip, the tip amount and the total amount are calculated with undefined values. I think you could solve it if you make it only update when the user types in the bill input.

  I recommend adding the autocomplete='off' attribute to the inputs.

  When you work with DOM elements you obtain them using getElementById.

  You can add a custom class .tipbutton to all the tips and save yourself some code like this:

  const tips = document.querySelectorAll('.tipbutton')
  

  Set tip = 0 and not tip = NaN, as it can cause bugs.

  You can use the datasets in each type to assign them a value, example:

  <button class="tipbutton tipbutton1" data-tip='0.05'>5%</button>
  <button class="tipbutton tipbutton2" data-tip='0.1'>10%</button>
  <button class="tipbutton tipbutton3" data-tip='0.15'>15%</button>
  <button class="tipbutton tipbutton4" data-tip='0.25'>25%</button>
  <button class="tipbutton tipbutton5" data-tip='0.5'>50%</button>
  

  The final code would be something like this:

  const tips = document.querySelectorAll('.tipbutton')
  
  manageTips(e){
    tip = parseFloat(e.target.dataset.tip);
    
    for(let tip of tips){
      if(tip !== e.target){
        tip.classList.remove('clicked')
      }
    }
    e.target.classList.add('clicked')
  }
  
  // Here you would be adding a single eventListener and improving the performance of the website
  for(let tip of tips){
    tip.addEventListener('click', manageTips)
  }
  

  I recommend that you read this article in which they make some examples of what Event Delegation is to use it in your events and improve performance.

  From this:

  billamount.addEventListener("input", acceptCharacters);
  peoplenumber.addEventListener("input", acceptCharacters);
  tipcustom.addEventListener("input", acceptCharacters);
  

  to this:

  document.addEventListener('input', acceptCharacters);
  

  I hope this helps! 😁

  0