// CONSTANTS
const 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 STAFF
function janitor(trash) {
  return Number(trash.replace(/[^0-9.]/g, ""));
}

// UPDATER
const 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 PRESETS
function 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();
}

// TIPBOX
tipBox.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");
    }
  }
});