Tip Calculator App made with HTML, CSS & JS

Community feedback

• 

  Amon•2,560

  @A-amonPosted almost 3 years ago

  Hello! Great job~ 😀

  Here are few suggestions:

  • Use button or radiobutton elements for the tip selection (Screen reader users won't know it's to be clicked if you use a div.
  • Change the RESET text to Reset. Find out more here 😀
  • Instead of using innerHTML for the texts, an alternative would be textContent. You can read about their differences here. But for this current use case, both can be used. 😉
  • For the tip buttons' event listeners, there seems to be lots of repeated code. In this case, you can use a single function for them all. For example:

  for(const tipBtn of tipButtons){
   tipBtn.addEventListener('click', handleTipClick)
  }
  const handleTipClick = (event) => {
              let tipValue = 1  // Change it to whatever the default tip value is
              const selectedTip = event.target.value
              if(selectedTip === '5%'){
                tipValue = 5
              }
              let totBill = Number(inputBill.value)/100*tipValue
              let totPeople = Number(nrPersone.value)
              totTipOutput.innerHTML =(totBill/totPeople).toFixed(2) + "€"
  }
  

  The code above is written with the assumption that radio buttons are used 😉. Also, it might or might not work but, the general idea is there. 😀

  Marked as helpful

  0
• 

  veronica•20

  @vtorre90Posted almost 3 years ago

  Thank you for the suggestion, I was looking for a way to shorten my code 😁 and you give me a great solution! Regarding the RESET comment is also interesting, I learn something absolutely new 🙏

  0

  ---

  

  Amon•2,560

  @A-amonPosted almost 3 years ago

  @vtorre90 Glad to help~ 😀

  0