Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 5 months ago

Interactive Tip Calculator

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

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm glad that I learned about using objects for the form validation: that definitely helped shorten the code. I also was able to use "pure" functions, but I'm not sure how much that really helped, it felt like it made the code longer.

What challenges did you encounter, and how did you overcome them?

I struggled a bit figuring out how to make the input value for the custom tip work. What I ended up doing was just making the "name" of the custom tip input nothing when one of the radio buttons was pressed for the other tip values, and making it "tips" when it had a value typed into it, and then I used a function to uncheck the other radio buttons. I am not sure if this was the most concise method though.

What specific areas of your project would you like help with?

First, thing I want to know: when is it actually useful to have "pure" functions(meaning none of the variables inside the function are global)? I ask this because my code had some functions with like 5-8 really specific variables, and the task was super specific as well, like I would probably not use it anywhere else. An example would be my updateDom function on line 154 of my script.js file.

Another question: how would you have done the "tips" section. I used radio buttons, and tried to put the custom tip input inside a label for another radio button so that when someone clicked that input, the other radio buttons would de-select, but that didn't work. Instead I did what I said above: I just added the same name as the radio buttons if something was typed inside. How would you have done it?

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 14avi14'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

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

Frontend Mentor

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

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