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

Responsive Tip Calculator App

Tristan 175

@xtris-dev

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


Hello, here is a project that I loved doing. This allowed me to practice my JavaScript well.

However, I still haven't managed to correct an error: the calculator may display $ NaN or $ infinity if we put 0 people. Don't know how to correct it :(

Thank you for your feedback! :)

Community feedback

Fidel Lim 2,775

@fidellim

Posted

In terms of design, you did really well in implementing the design (mobile and desktop). You might want to remove the arrows (appears when hovered) in the inputs you can do it this way:

/* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */ input[type=number] { -moz-appearance: textfield; }

Also, the answer will give infinity, as you said when value of input goes to 0. What you can do is add an if statement: "if the value goes to zero, set the output to zero directly".

I hope it helps :)

Marked as helpful

0

Tristan 175

@xtris-dev

Posted

@fidellim Thank you a lot !

0
Fidel Lim 2,775

@fidellim

Posted

@Tristanbct You're welcome :) Good luck on your journey!

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