Frontend Mentor | Tip Calculator App coding challenge solution

Solution retrospective

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

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

Refactoring the code to reduce repetition. Reading more on refactoring helped, however, I believe more refactoring is possible.

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

Any feedback on how I can further make the code simpler and more readable.

Community feedback

@jamesbrown173

Posted about 2 months ago

Design:

The design is clean and easy to follow, I see you've made adjustments for your own styling that's great. All items align well and use correct icons.

When hover over the custom tip input the added border makes the div jump up and down. You could fix this by adding a 'fake' border that is the same color as the background in line 31 of index.hmtl.

On the mobile size the background blue color is only applied to the div container not the body, so it leaves white padding on the L and R. I think you could either apply the BG color to the body or remove X padding to fix this line 13 index.html.

Javascript code:

As far as I can tell the bill only calculates when the tip inputs change, you could at an event listener for 'keyup' to the people and bill elements if you want it to be more responsive and change whenever a user types. You'd also need to add conditional statements to prevent submission if one or more fields were empty.

🤗 Great job and happy coding! 🤗

@khalagai

Posted about 2 months ago

@jamesbrown173 thank you so much for the guidance. Let me take up the challenge.

Tip Calculator App