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 using CSS Grid, Flexbox, Vanilla JS

Ken 935

@kenreibman

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


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

Community feedback

P
Ken 4,915

@kens-visuals

Posted

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

1

Ken 935

@kenreibman

Posted

@kens-visuals Thanks again!

I see you've been shifting toward showcasing more of your work and knowledge on some blog posts! I gave your "How to Master Web Dev in 30 days" post a read, and I ended up sending it to someone I connected on LinkedIn wanting to learn Frontend Development.

Awesome work, and I hope you keep learning and teaching others!

I sent you an invitation to connect on LinkedIn and would love to connect with you outside of FEM!

1
P
Ken 4,915

@kens-visuals

Posted

@kenreibman you're welcome!

I really appreciate your support, and yes the idea of starting a blog was my frustration when I couldn't find something, so I decided to share my knowledge and experience with the community.

Oh, so that was you 😃 sure thing, feel free to shoot me a message on LinkedIn if you have any questions about this front-end stuff and in general if you have something cool to share 👨🏻‍💻 Cheers 👾

1
IRVINE MESA 1,855

@DrMESAZIM

Posted

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 .

0

Ken 935

@kenreibman

Posted

@DrMESAZIM Haha thanks, I know how to submit a repository. I must've copied the wrong link by accident.

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