Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator App

Kehinde 660

@jonathan401

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


So it's been a while I worked on any project. This project took me longer than I thought it should have but I'm glad at how it came out. My Javascript code is not really organized so please do well to comment on how I could make the code a little bit cleaner and more readeable. I had quite a challenge connecting up the error messages as well as making sure the custom field was in sync but I was'nt able to do this entirely right. On feedback on how I could fix this is highly appreciated. Thanks for checking out my solution :).

Community feedback

Karol 1,620

@karolbanat

Posted

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

@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 💫.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord