Skip to content
Submitted about 1 month ago

tip-calculator-app-main

AymaneOnline•330
@AymaneOnline
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I'm really happy with the overall work, I don't know if there is more things to do to improve the JavaScript code in terms of code refactoring and/or optimization.

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

I've encountered several challenges... The first one was choosing a logic of how the application would work, either updating the tip and total values as the user fill in the inputs or do the calculation and showing the result at the end after filling all the inputs... The second thing was the calculation itself, because I needed to make the calculateTip() function work each time the user interacts with the form.

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

I would love getting some feedback about the quality of the JavaScript code and also if the quality of the responsiveness of the page regarding large screens.

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted about 1 month ago

    Hi @AymaneOnline,

    I took a look at your solution and have a few suggestions:

    • Merge Script Tags: I noticed you're using two script tags—one for an external JavaScript file and another for inline JavaScript. It’s a good practice to consolidate all your JavaScript into a single external file. This will make your code easier to maintain and reduce redundancy.
    • Form Structure: You're using two separate forms: one for the input fields and another for the reset button. Ideally, both the fields and the reset button should be within the same form to keep everything together. Also, the reset button shouldn’t have type="submit". Its type should be button, so it doesn't accidentally trigger form submission.
    • Prevent Page Reload on Reset: Currently, when you click the reset button, the page reloads. This happens because it's inside a form, and you're not preventing the default form submission behavior. Instead of reloading the page, use JavaScript to reset the form fields without refreshing the page.

    Hope these suggestions help!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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