Skip to content
Submitted 8 months ago

Responsive accessible Tip calculator. Vanilla JS & CSS

Ortaly•970
@ortalyarts
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

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

  • Mitali Shah•320
    @MitaliShahPosted 7 months ago

    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
    Ortaly•970
    @ortalyartsPosted 7 months ago

    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

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