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

@Glamoore

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


I enjoyed building this. Any feedback would be appreciated!

Community feedback

Eray 1,410

@ErayBarslan

Posted

It looks close to the design and functionalities works as supposed to, well done!

My suggestions:

  • Style of select tip buttons doesn't reset after focusing out. Instead of changing background with JavaScript, you can use focus selector with CSS like button:focus {style}
  • Decimals overflows on certain calculations. You can use .toFixed(number) method to prevent that.
  • Error for input 0 doesn't refresh on correct input. You can add an else state for inputs more than 0.

Accessibility:

  • You can change bill heading from <h2> to <h1>. Even though they look to have same importance, for SEO it's still better solution than not using <h1>. However for this project if you won't mind the time another approach would be: Instead of using provided logo.svg you can use <h1>splitter<h1/> and style as logo is just a text.

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