Tip calculator implemented with plain HTML, CSS and JS.
Design comparison
Community feedback
- @RoksolanaVeresPosted about 1 year ago
Hi, Guilherme! I came across your solution and got quite interested in it 🙂
It looks really nice and well done, but while testing the app I found a small issue: if a user, while selecting a tip %, accidentally clicks the white space between the buttons, they get "NaN" as a result of calculations in Tip Amount and Total sections.
This happens because you use the event delegation principle on the tipButtons div, but don't check whether the clicked element within that div is actually a radio button. To fix it, you have to add the following condition to tipButtons:
tipButtons.addEventListener("click", (e) => { if (e.target.type === "radio") { tip = e.target.value; calculate(); } });
Thanks for your attention and happy coding 😉
Marked as helpful0
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