Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Tip Calculator using CSS Grid, Flexbox, Vanilla JS

Ken•935
@kenreibman
A solution to the Tip calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Going to keep updating this calculator, there are a few bugs. Any feedback would be greatly appreciated.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Ken•4,915
    @kens-visuals
    Posted about 3 years ago

    Hey @kenreibman 👋🏻

    I looked at your code and I can see what you're missing. You're missing validation, if you take a look at my solution you'll see that you can't input letters, a bunch of zeros, symbols, and invalid value in general. In your case, you're only checking if the input is filled then calculate the number, but you need to consider the edge cases. Other than that, everything looks and works perfectly. Nice job, and sorry for the late response.

    Marked as helpful
  • IRVINE MESA•1,855
    @DrMESAZIM
    Posted about 3 years ago

    Well done @kenreibman ,the HTML and CSS code you used is very good .I would like for you to take note of this in the near future

    1.The code repository URL was incorrectly submitted in your solution .For assistance to correctly do that , please consider watching my YouTube video on this link https://www.youtube.com/watch?v=BW0FCFV323s 2. Using coding skills it would be nice to limit the decimal places on the the "Bill" amount. 3.The "Number of people" integer should not have decimal units .

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub