Tip calculator implemented with plain HTML, CSS and JS.

Community feedback

• 

  Roksolana•910

  @RoksolanaVeresPosted over 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 helpful

  0