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

JavaScript Event listeners

rosemutaiβ€’ 220

@rosemutai

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Tesla_Ambassadorβ€’ 3,000

@tesla-ambassador

Posted

Hello Rose Mutai! This is a pretty good solution. I also enjoyed completing it... It was fun and challenging. I took a look at your code to find out why your calculator wasn't centered and I added a few styles to the css in my browser to see what would fix it. I recommend you add this to your body tag:

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

I found out that if you want to vertically align something using flex, you need to give it's container a height property. Also, I don't think I implemented this on my solution but It'd be great if your form submission and validation function fires after all fields have been filled in so that people that have no keyboards can find it easier to use.

Have fun programming and I hope you find this helpful. πŸ‘‹

Marked as helpful

0
rosemutaiβ€’ 220

@rosemutai

Posted

Hello Tesla_Ambassador. This was a good challenge, I also enjoyed working on it. Thanks for your feedback, will implement that. Happy Coding!

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