Design comparison
SolutionDesign
Solution retrospective
Hey, i'm news to js any feedback is welcome thx u :).
Community feedback
- @tedikoPosted over 3 years ago
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 yourtotal_some
,tip_total
values so it doesn't return values like: 13.3335534. You have to convert them to number first, withparseFloat
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
withfunction
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 yourcalculate()
function to fire on each user change. Instead addaddEventListener
to your input and watch forchange
event. Then callcalculate()
function.
Good luck with that, have fun coding! 💪
Marked as helpful1@SeyBooPosted over 3 years ago@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 - Add some
Please log in to post a comment
Log in with GitHubJoin 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