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

Tip Calculator App

@yunusemrecinar

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 I added extra from requested **

  • I added a tip icon at the bottom of the calculator with some animations.

Any feedback is welcome :)

btw at the solution png, it seems arrows on the input. I remove them. Check out the site.

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Yunus, very neat graphic at the bottom there! Anyway, about the spinner buttons, I see that you add that in your CSS for WebKit, but for Firefox, they're still there. To remove them for Firefox users, you can try adding -moz-appearance: textfield; to the number inputs.

One comment after playing around with the calculator: For the custom input, it would be nice if the value could be stored somehow and not have it disappear if another button is pressed and then needing to input the number again. Sometimes the user might want to compare tip amounts, and so it's not uncommon that they would click around the options to find the best option. It would also be good if the custom tip could be calculated right away based on the target value instead of needing to hit "Enter", which was something that I kind of chanced upon without realizing that's the way to calculate the input.

That's all for comments, great work here as usual, Yunus!

0

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