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

๐ŸงฎTip Calculator | HTML, CSS | Javascript | Anime.js | Webpack

buneeโ€ข2,020
@buneeIsSlo
A solution to the Tip calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


๐Ÿ˜ฌYikes! did this challenge take me a long time to complete... Glad to be finally done with it.

Acknowledgment

First off, I'd like to thank @tediko for writing code that's clean and comprehensive. I spent a lot of time studying his Solution to the Calculator app by FEM. This solution forced me to learn a lot of new technologies and concepts that I found extremely helpful.

Secondly, I want thank @Syafiqjos. I found a very useful way to limit user input from his Solution.

Some not so necessary Features

  • Added a punny intro animation
  • Flipped some colours around and added a dark theme mode
  • A toggle button to switch between the two theme modes

Questions

  • What tag would be more appropriate for the intro element in my markup?
  • I'd like to know your thoughts on my javascript code, I found it a bit challenging to stick to the DRY principle.
  • I'm fairly new to webpack, so I'd appreciate it if you could give some tips on writing a better config file.

Click here to view the Live Site

Click here to view the Code

P.S. If you have any questions for me, Please feel free to message me on slack :)

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on bunee's solution.

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