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

tip calculator html, css, javascript, flexbox

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

Solution retrospective


Updated version after I got valuable feedback for the first attempt. Also fixed issues from the html report. 😊

Hi everybody, thanks for checking out my tip calculator solution. :) It was quite challenging for me. I tried my best to make it accessible for everybody. Now it works. I also tried to keep my code read-able, so I hope you guys find it clear enough. Any feedback is welcome! Happy coding! Linda 😃

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Axseinga•540
    @axseinga
    Posted almost 4 years ago

    Hi ellienndea,

    Congrats on finishing this challenge!

    Here are some suggestions from me:

    • you can center your calculator vertically on the desktop design, so it does not stick to the bottom of the page,
    • I would make the "coded by" paragraph much smaller, it looks really big on the desktop and it breaks into two lines on the mobile,
    • you can change the event of event listener to "input" instead of "change" as it was suggested to me as well (I used originally "keyup"). With the "change" your event fires only when User clicks outside after filling the inputs,
    • you can try to break your javascript code into smaller functions so it's more readable :) article about good practices in JS

    I hope it will be helpful for you :) It's not so easy challenge. Great work!

    Marked as helpful
  • Chamu•13,740
    @ChamuMutezva
    Posted almost 4 years ago

    Greetings Ellienndea

    Well done, you did well on this project. The calculation are working well, one thing that you need to take care of are numbers below zero - you validated for zero but not amounts less than zero

    Happy coding

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

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

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

Log in with GitHub