Something went wrong. Try again.
A practice project for javascript frdg.tngl.io/tip-calc
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283// CONSTANTSconst tipButton10 = document.getElementById("b10");const tipButton15 = document.getElementById("b15");const tipButton20 = document.getElementById("b20");const tipButton25 = document.getElementById("b25");const billBox = document.getElementById("bill");const tipBox = document.getElementById("tip");const totalBox = document.getElementById("total");
// CLEANING STAFFfunction janitor(trash) { return Number(trash.replace(/[^0-9.]/g, ""));}
// UPDATERconst update = function () { const bill = janitor(billBox.value); const tip = janitor(tipBox.value);
const tipTotal = bill * (tip / 100); totalBox.textContent = "$" + tipTotal.toFixed(2);};document.querySelectorAll(".watch").forEach(function (x) { x.addEventListener("input", update);});
// TIP PRESETSfunction tip10() { const actb = document.querySelector(".actb"); if (actb) { actb.classList.remove("actb"); } tipButton10.classList.add("actb"); document.getElementById("tip").value = 10; update();}function tip15() { const actb = document.querySelector(".actb"); if (actb) { actb.classList.remove("actb"); } tipButton15.classList.add("actb"); document.getElementById("tip").value = 15; update();}function tip20() { const actb = document.querySelector(".actb"); if (actb) { actb.classList.remove("actb"); } tipButton20.classList.add("actb"); document.getElementById("tip").value = 20; update();}function tip25() { const actb = document.querySelector(".actb"); if (actb) { actb.classList.remove("actb"); } tipButton25.classList.add("actb"); document.getElementById("tip").value = 25; update();}
// TIPBOXtipBox.addEventListener("input", function () { tip = Number(tipBox.value); if (tip === 10) { tip10(); } else if (tip === 15) { tip15(); } else if (tip === 20) { tip20(); } else if (tip === 25) { tip25(); } else { const actb = document.querySelector(".actb"); if (actb) { actb.classList.remove("actb"); } }});