Tips

HTML

// script.ts

document.addEventListener("DOMContentLoaded", () => {
  const billInput = document.getElementById("bill") as HTMLInputElement;
  const percentage1Select = document.getElementById(
    "percentage1",
  ) as HTMLSelectElement;
  const percentage2Select = document.getElementById(
    "percentage2",
  ) as HTMLSelectElement;
  const output = document.getElementById("output") as HTMLElement;
  const resetButton = document.getElementById(
    "resetButton",
  ) as HTMLButtonElement;

  function calculateTip() {
    const bill = parseFloat(billInput.value);
    const percentage1 = parseFloat(percentage1Select.value);
    const percentage2 = parseFloat(percentage2Select.value);

    if (isNaN(bill) || bill <= 0) {
      output.style.display = "none";
      resetButton.style.display = "none";
      return;
    }

    const averagePercentage = (percentage1 + percentage2) / 2;
    const tip = bill * (averagePercentage / 100);
    const total = bill + tip;

    output.textContent = `You pay $${total.toFixed(2)} ($${bill.toFixed(2)} + $${tip.toFixed(2)} tip)`;
    output.style.display = "block";
    resetButton.style.display = "block";
  }

  function resetForm() {
    billInput.value = "";
    percentage1Select.value = "0";
    percentage2Select.value = "0";
    output.style.display = "none";
    resetButton.style.display = "none";
  }

  billInput.addEventListener("input", calculateTip);
  percentage1Select.addEventListener("change", calculateTip);
  percentage2Select.addEventListener("change", calculateTip);
  resetButton.addEventListener("click", resetForm);
});

HTML TipsCSS TipsJS Tips