Tip Calculator App

Community feedback

• 

  Karol•1,620

  @karolbanat

  Posted over 2 years ago

  Hi @jonathan401, great to see you back 😀 with great solution 🎆✨.

  Here is my feedback:

  • Move the aria-label=custom tip input from li with custom tip input to the input inside
  • The for attribute in <label for="bill">Bill</label> should match that's of input, so change it to bill-field
  • When you type custom tip percent it incorrectly calculates the Total / person amount. To fix it you would probably want to add 1 to customValue in getTotalTips function, in the line where you assign result variable. So just changing (tip * (customValue ? customValue : tipPercent + 1)) to (tip * (customValue ? customValue + 1 : tipPercent + 1)) should fix it.

  Also if I would do that challenge again I would do the tip buttons as custom radio buttons (although i didn't do it that way because I was too lazy 😅).

  And getSingleTip and getTotalTips functions look similar so you could probably refactor it. They get the same parameters sent so maybe you could merge them together, and return an array or object that you would destructure in getResults. And I don't think you need too check for customValue in those two functions as you check for it before sending percentage parameter in getResults function. So if I would do that it would look something like this:

  const getTips = (tip, percentage, totalPersons) => {
  	let percent = percentage / 100;
  	let tipPerPerson = ((tip * percent) / totalPersons).toFixed(2);
  	let totalPerPerson = ((tip * (percent + 1)) / totalPersons).toFixed(2);
  	return [tipPerPerson, totalPerPerson];
  };
  
  const getResults = (btnId = 0) => {
  	customValue = customField.value;
  	let [tipValue, totalPersonsValue] = getTips(billField.value, customValue ? customValue : btnId, billers.value);
  
  	tip.textContent = `$${tipValue}`;
  	totalTips.textContent = `$${totalPersonsValue}`;
  };
  

  Hope it helps and happy coding 😊.

  01

  Marked as helpful