Skip to content
Submitted about 2 months ago

Responsive tip calculator

Barnabas001•180
@Barnabas001
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

My progress so far, seem slow but daily pushing forward

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

Order of arrangements in my javascript file, i was able to sort it by going through series of code online that relate to what i was facing

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Nice work on your tip calculator! Here's my feedback:

    Strengths

    • Clean UI with good visual feedback for active states
    • Responsive design for different screen sizes
    • Effective input validation
    • Good implementation of the color scheme

    Suggestions

    • Move your HTML structure from JavaScript to the HTML file for better SEO and page loading
    • Replace prompt() for custom tip with an integrated input field
    • Validate inputs as they change rather than only when calculating
    • Add keyboard accessibility (tab navigation, Enter key support)
    • Consider implementing proper error handling for non-numeric custom tip values
    • Add ARIA attributes and proper labeling for accessibility

    While your project URL mentions React, I don't see React being used in the code. This calculator would work well as a React component if you're interested in refactoring it!

    Overall, you've built a functional app with a good UI. The main improvements would be in accessibility and user experience.

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