Skip to content
Submitted 3 months ago

Tip Calculator App

Purnama S Rahayu•250
@catreedle
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 are you most proud of, and what would you do differently next time?

I am proud of solving the select tip section and the custom input field.

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

I was struggling with the custom input, it is resolved with position: absolute.

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

Any input would be appreciated but primarily on Javascript. How can I improve my index.js, also if you find any error.

Community feedback

  • edpau•440
    @edpauPosted 30 days ago

    Hi, nice code, I can follow through your code easily and understand the logic.

    I noticed a small bug in your JS, if I input all the values, bill, tip % and number of people, then I decide to change the bill amount, delete all the inputted number, I will trigger the error message and the emptyCalculationResult() function, all the values at the back will become zero, but on the display it still show I have selected the tip % and inputted number of people and the calculator will not calculate the new result.

    I also noticed when I hover onto the input, the layout shift, I tried using outline and the layout didn't move. Or set a transparent border. Add a CSS border on hover without moving the element

    Marked as helpful
    0
    Purnama S Rahayu•250
    @catreedlePosted 20 days ago

    @edpau Hi. Thank you so much for this!

    0

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