Submitted 6 months ago

Tip Calculator App with JS, Flexbox and Grid

Jordan Davenport•930

@jjdavenport

Preview site View code

This is a solution for...Tip calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

Making my JS simpler by calling functions instead of putting all the code into the button and input event listeners. I built the site mobile first and would do the same next time.

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

The main challenge was the logic behind the JS, I rewrote my code once to make everything easier and simpler.

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

Any feedback is appreciated.

Community feedback

ajkun55•1,400
@ajkun55Posted 5 months ago
Your design is not same with requirement, the default input should be void, and your page with outcomes already there; The number of people should not be zero and error message display, yours have none; When I checked the js function, it seems not woking well, the custom tip not right and position badly, but your project is mostly fine.
Marked as helpful
1
Koda👹•3,830
@kodan96Posted 6 months ago
hi there! 👋

You experience layout-shifting because you applied border to your input field when it's focused. border widths are calculated into your layout, hence they cause shifting when they appear on different states, like :hover,:focus, etc.

If you wanna prevent this, just replace borders with outlines. the syntax is the same. For example: outline: 1px solid black;

Hope this helped 🙏

Good luck and happy coding! 💪
Marked as helpful
1

Please log in to post a comment

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