tip-calculator-app

Community feedback

• 

  Shakil ahmed•260

  @Shakil-aPosted 4 months ago

  good job on the solution hexerse!,

  this is feedback i found online for your solution:

  • Improved tipAmount Function Check:

  if (!bill || !people) { return; } Why: Ensures that calculations only occur if both bill and people have valid values (non-zero). This prevents errors when one of them is 0.

  • Clearing Custom Input on Button Click:

  button.addEventListener("click", (e) => { custom.value = ""; // Clear custom input when a button is clicked handleTip(e); });

  Why: When a tip button is clicked, the custom input should be cleared to avoid conflicts and ensure only one tip value is active at a time.

  -Handling Active Class for Tip Buttons:

  buttons.forEach(button => button.classList.remove("active")); // Remove active class from all buttons e.target.classList.add("active"); // Add active class to the clicked button Why: Visual feedback is provided by adding an active class to the clicked button and removing it from others, making it clear which tip option is selected.

  • Custom Input Handling:

  custom.addEventListener("input", (e) => { buttons.forEach(button => button.classList.remove("active")); // Remove active class from all buttons handleTip(e); handleSubmit(e); }); Why: When the user enters a custom tip, it should clear the active state of the tip buttons and update the tip amount immediately.

  • Formatted Output:

  calcTip.innerHTML = $ ${tipperPerson.toFixed(2)}; totalPerson.innerHTML = $ ${billperPerson.toFixed(2)}; Why: Ensure the calculated amounts are displayed with two decimal places for better readability and accuracy.

  • Prevent Default Form Submission:

  form.addEventListener("submit", handleSubmit); Why: Ensures that the form does not submit in the traditional way, allowing custom calculations to happen without refreshing the page.

  Marked as helpful

  0