Check out this amazing tip calculator on netlify. I successfully built it using html, scss, and javascript without relying on any tutorials. Despite taking longer than expected due to being a beginner, I am proud of the outcome.
Now, I need some assistance with a specific function.
I want the numbers in the calculator to automatically update when I enter a new dollar amount in the billing input field.
For example, if the bill is $50 and the tip percentage is 50%, the tip amount should be $25 making the total bill $75.
If I accidentally change the bill amount to $60, the tip amount should adjust to $30, resulting in a total bill of $90. However, I'm struggling to make these updates happen instantly when modifying the dollar amount in the billing input field.
I suspect that utilizing a "change" event listener might solve this issue, but I'm uncertain about how to best incorporate it or if it's the correct approach.
// Upper Box Selections
const tipPercent = document.querySelector(".tip-percent");
const tipSlider = document.querySelector("#tip-slider");
tipSlider.oninput = function () {
...
};
// Bottom Box Selections
const splitSlider = document.querySelector("#split-slider");
splitSlider.oninput = function () {
...
};
Seeking guidance on improving this functionality? Visit .