Tip Calculator App

Community feedback

• 

  Karol•1,620

  @karolbanatPosted almost 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 😊.

  Marked as helpful

  0

  ---

  

  Kehinde•660

  @jonathan401Posted almost 2 years ago

  @karolbanat Thanks so much for your feedback!. I'll make sure to make the necessary changes. Well I had initially made the buttons radio buttons but I discovered I'd have to use the :has selector which unfortunately is not working (I use Firefox). But I'd be revisiting this challenge soon. Thanks a lot again for your feedback 💫.

  1