Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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 - HTML/CSS/JS

keziarkts 370

@keziarkts

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 everyone!

It's not perfect yet but I'm glad with the result and the fact that I learned so many many things with this challenge 😀

My difficulty: The "custom tip" part

Let's say that when a user types in their custom tip value but finally decide to click one of the suggested/default tips, I don't know how to remove this value and come back to the default text "Custom" (the calculation part is ok though). For the moment, the only solution is to click the reset button.

Maybe it's easy to resolve this but I just can't see the solution :(

Thank you for your help

Happy coding 🎉

Community feedback

papa 340

@PapsPython

Posted

@KEZIARKTS. I suggest

button.addEventListener("click", selectTipPercentage)

function selectTipPercentage(){ customtip.value=" " }

0

keziarkts 370

@keziarkts

Posted

@PapsPython thank you for your suggestion :)

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