Tip Calculator That Doesn't Accept Negative Values

Solution retrospective
Feedback on refactoring the following block of code from my JS script would be greatly appreciated:
container.addEventListener("click", (e) => {
if (e.target.classList.contains("percent") || e.target === customTipInput) {
if (document.querySelector(".percent.selected")) {
document.querySelector(".percent.selected").classList.remove("selected");
}
e.target !== customTip && e.target !== customTipInput
? e.target.classList.add("selected")
: customTip.classList.add("selected");
e.target !== customTipInput && e.target !== customTip
? (selectedTip = e.target.textContent)
: (selectedTip = customTipInput.value);
}
calcTotals();
});
All other feedback welcome and encouraged.
Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
🤣Just so you know, I suck at Javascript;
-
Instead of getting the whole container, I think
document.querySelectorAll('.percent')
would have been cleaner, and then you'd have to do afor-loop
to distinguish which percent was clicked, but your way is just fine. -
& you can just merge the ternary operators into one since the conditions are the same for both of them.
& I have to say this is one of the best solution I have seen out there.
Keep coding👍.
Marked as helpful -
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