Skip to content
Submitted 2 months ago

Tip Calculator App

sass/scss
6alactico•470
@6alactico
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?

I am most proud of making everything interactive. I also used Sass/SCSS for the first time, but next time, I think I will avoid it until I gain a better understanding of it.

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

The main challenge was putting everything together for interactivity. I overcame this by breaking the project into smaller parts to understand what I was trying to accomplish. I also referred to JavaScript resources to help me apply the necessary elements.

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

Any feedback is welcome, but I am especially open to input on JavaScript, as I am still learning and find some parts challenging.

Code

Please log in to post a comment

Log in

Community feedback

  • Abdulgafar-Riro•250
    @Abdulgafar-Riro

    Peer Review:

    This is a well-structured and readable implementation of a tip calculator with thoughtful input validation and responsive UI interactions. Event delegation is clean, and user experience is enhanced by error messaging and real-time calculations.

    Strengths:

    • Clear separation of concerns (input handling, calculations, reset).
    • Good use of trim() and parseFloat() for robustness.
    • Real-time validation and feedback improve UX.
    • Smart handling of both preset tip buttons and custom input.

    Suggestions:

    Consider debouncing input events to optimize performance on rapid typing. You could abstract calculations() parameters to avoid DOM lookups on every call. Accessibility could be improved by associating error messages with inputs via aria-describedby.

    Overall, concise and efficient—great job!

    Marked as helpful

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