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

Responsive accessible Tip calculator. Vanilla JS & CSS

P
Ortaly 970

@ortalyarts

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


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

I've tried to make this calculator app accessible. Please advise if you spot any accessibility issues, or if you have any other suggestions. Thanks in advance 😊

Community feedback

P

@MitaliShah

Posted

Hi, @ortalyarts congratulations on completing your project!

  • I noticed a few things that you might want to take a look at:

    • Currently, the bill amount is only accepting integers. It would be nice if users could enter tip amounts with decimals, for example, $146.56.

    • The text for "Tip Amount/Person" and "Total/Person" could be improved in terms of color. Please check the contrast ratio of the colors for accessibility using the webaim.org Contrast Checker.

    • The border color of the "Bill" and "Number of People" input fields does not match the design.

Overall, great solution!

I hope this feedback is helpful. Keep up the good work, and happy coding!

-Mitali

Marked as helpful

0

P
Ortaly 970

@ortalyarts

Posted

Hey @MitaliShah,

thanks for taking time to go through my project! I'll definitely improve the listed issues.

  • Ortaly
1

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