tips calculator page

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  You've got a lot of duplication in your event handlers where each one only changes by the tip percentage amount. You can extract that into a reusable function that takes the tipPercent as a parameter

  You can then call that in your event handlers.

  You could go a step further and add a data-tip-percent value to each of your <button> elements in your html. That way, instead of having separate event handlers for each button, you can have one event handler for all buttons and read the data-tip-percent from the element using getAttribute. You can then pass that to your function created in step one.

  Going further still I would break that re-usable function into multiple smaller functions separating out functions that calculate a value from functions that change a display on the screen. That separates the concerns and would make it easier to update both the UI and the calculations if requirements changed in future.

  1
• 

  Isabela Oliveira•310

  @oliveridsPosted about 3 years ago

  For the tips, for example, you can shorten the code by using if else with the help of an event listener on a list of all buttons. Your code would look a bit like this:

  let buttons= document.querySelectorAll('.tip-select btn'); //this will create a nodeList

  buttons.forEach(each => {

  each.addEventListener('click', event => {

  if(event.currentTarget == fivePercent) {

  //

  } else if(event.currentTarget == fivePercent) {

  //

  } ...

  }); });

  Also, adding the attribute "type=number" also shortens your code because it'll only allow the user to type numbers, and you won't need to do the verification "if(NaN ...)".

  0