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

tip-calculator-app-main

@SeyBoo

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey, i'm news to js any feedback is welcome thx u :).

Community feedback

P
tediko 6,580

@tediko

Posted

Hello, Chevalier Antoine! 👋

Congrats on finishing another challenge! 🎉 Your solution looks very good and also responds well. Here's my few tips:

  • Add some margin on mobile media query to your .container to make some room between edges of page and your container. (e.g. margin: 0 12px)
  • Remove arrows/spinners from inputs to match design. Read how
  • Use the toFixed() method to format your total_some, tip_total values so it doesn't return values like: 13.3335534. You have to convert them to number first, with parseFloat for example.
total.innerHTML = "$" + parseFloat(total_some).toFixed(2);
tip.innerHTML = "$" + parseFloat(tip_total).toFixed(2);
  • I can't reset calculator with reset button. Console throws an error - reset is not a function.
  • Remove setInterval with function that wraps all your logic. What it does is rerun this function every one seccond which is really bad. You did it because you want your calculate() function to fire on each user change. Instead add addEventListener to your input and watch for change event. Then call calculate() function.

Good luck with that, have fun coding! 💪

Marked as helpful

1

@SeyBoo

Posted

@tediko

Hello thanks for your feedback.

  • I hide the arrows (not false i didn't thinks about it)

  • I forgot to test the Function ^^

  • I didn't thinks about it yeah it's not optimal.

I did a lot of mistake ^^

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