@Shakil-a
Posted
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
