Submitted 6 months ago

Responsive Tip Calculator 👍

pure-css

Josh Kahlbaugh•540

@Joshk7

A solution to the Tip calculator app challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I liked having a central event handler that fires whenever any input is changed for the form.

I would possibly change the radio buttons to just be normal buttons because the main form logic only depends on the state of the labels instead of the actual radio button.

const handleRadioClick = (e) => {
    resetCustom();
    resetPercentButtons();
    unClicked = false;
    e.target.classList.toggle("clicked");
    disableButton();
};

What challenges did you encounter, and how did you overcome them?

A big challenge was trying to find the correct event to attach an event handler to for the form.

Finally, I added this:

tipForm.addEventListener("input", handleFormInput);

What specific areas of your project would you like help with?

I'd like help specifically with how I could restructure the html for the main form. Additionally, any tips on better practices for writing JavaScript would be appreciated!

Code

Please log in to post a comment

Community feedback

Muhamad Rukhul Kirom•380
@rukhulkirom
Posted 4 months ago
Hello there👋. Good job on completing the challenge!

I have some suggestions about your code that might interest you.

I think there is a small bug in the total calculation, where the tip is not added to the total per person. Currently it just splits the bill per person, but does not add the tip.

Change the calculateTotal function from:
```
const calculateTotal = (bill, people) => {
    const total = bill / people;
    return total.toFixed(2);
};
```
to:
```
const calculateTotal = (bill, percentage = 0, people) => {
    const tip = (bill * percentage) / people;
    const total = (bill / people) + parseFloat(tip);
    return total.toFixed(2);
};
```
Then in handleFormInput, change the call:

const totalAmount = calculateTotal(bill, percent, people);
Marked as helpful

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