@karolbanat
Posted
Hi @jonathan401, great to see you back 😀 with great solution 🎆✨.
Here is my feedback:
- Move the
aria-label=custom tip input
fromli
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 tobill-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
ingetTotalTips
function, in the line where you assignresult
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
@jonathan401
Posted
@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 💫.