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 No Figma

grgrnkoo 520

@grgrnkoo

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 are you most proud of, and what would you do differently next time?

Proud to get rid of all possible bugs and fix all the minor things like uncheck radio buttons when focusing on "Custom field", adding ternary conditional operators to a total sum outputs, so it always shows right data or "$0.00" etc.

Also proud to level up my skills totally and apply my new knowledge from "Refactoring your Code" topic on JS Path

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

Figuring out how to get data from all inputs. Overcame it understanding that I can apply only one event listener on the whole form. It helped a lot!

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

Just want to get an honest review on my project. Thanks a lot. Happy Coding!

Community feedback

@nullpuppy

Posted

I only really skimmed through the code, but looks good!

A couple things I noticed while poking around though: it looks like the only validation is checking if the number of people input is zero. I'm able to put in random text, and there's no errors presented. Same with the bill amount. I know it's not really clearly called out from what we're given for the challenge though, so maybe that's all ok.

Also, nothing gets calculated until focus is cleared from an input. You could register a handler for the 'input' event and get live updates!

0

grgrnkoo 520

@grgrnkoo

Posted

@nullpuppy thanks for your reply! yes, the main reason of such a poor validation is because of the task. i decided that the best i can do is follow the original instructions.

about the focus part. i’ll try to check other options of events. maybe ‘keydown’ should work better

1

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