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 - Built with CSS Grid, Flexbox & JavaScript

P

@a-woodworth

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


Hi everyone! 👋

Finally getting around to posting my solution for this challenge. Tried to make this tip calculator accessible, but still learning a11y so did my best.

The math shown in the Figma example had me switch out how I calculated my total split tip. Had initially rounded up all the values.

I'm sure there are areas in my code that could be improved, but the calculator is working so time to move on to another challenge.

Happy Coding!

Community feedback

@danielemanca1983

Posted

Hey there,

I think your solution to this challenge is really good, mark-up is well written and using semantic tags, the CSS modular architecture you have followed is also very good, the UI for the component closely resembles the design provided in the challenge, and the JavaScript functionality has also been written very well, with all the relevant variable declarations and their utilisation in the relevant functions.

Really a great solution, keep up the great work,

:)

Marked as helpful

0

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