Submitted about 3 years ago

Tip Calculator That Doesn't Accept Negative Values

Corvida Raven•680

@SheGeeks

Preview site View code

This is a solution for...Tip calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

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.

Community 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 a for-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
1
Corvida Raven•680
@SheGeeksPosted about 3 years ago
@thulanigamtee Greatly appreciate you following up on this and will let you know how it goes implementing your suggestions.

Also, no matter where we are, we all have something to share from what we've learned and something to learn from what others share. 🙏🏾
1

Please log in to post a comment

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