JS

// Define variables and select elements
const billInput = document.getElementById("bill");
const customTipInput = document.getElementById("custom-tip");
const numPeopleInput = document.getElementById("people");
const tipAmounts = document.querySelectorAll(".tip-amount");

const tipAmountDisplay = document.querySelector("#tip-amount-per-person span");
const totalAmountDisplay = document.querySelector("#total-per-person span");

// Initialize values
let bill = 0;
let customTip = 0;
let numPeople = 1;

let activeButton = null; // Initialize the active button variable

// Update bill value and calculate results
function updateBill(event) {
  bill = parseFloat(event.target.value);
  calculateResults();
}

// Update custom tip value and calculate results
function updateCustomTip(event) {
  customTip = parseFloat(event.target.value);
  calculateResults();
}

// Update number of people and calculate results
function updateNumPeople(event) {
  numPeople = parseInt(event.target.value);
  calculateResults();
}

// Toggle active class on tip amount buttons
function toggleActive(event) {
  event.preventDefault();
  const currentButton = event.currentTarget;

  if (activeButton) {
    activeButton.classList.remove("active"); // Remove the active class from the previous button
  }

  currentButton.classList.add("active");
  customTip = parseFloat(currentButton.dataset.tip);

  customTipInput.value = ""; // Clear custom tip input
  calculateResults();

  activeButton = currentButton; // Update the active button variable
}

// Add event listeners for tip amount buttons
tipAmounts.forEach((tipAmount) => {
  tipAmount.addEventListener("click", toggleActive);
});

// Add event listeners to input fields
billInput.addEventListener("input", updateBill);
customTipInput.addEventListener("input", updateCustomTip);
numPeopleInput.addEventListener("input", updateNumPeople);

// Add event listener for clicks on the custom tip input field
customTipInput.addEventListener("click", () => {
  tipAmounts.forEach((tipAmount) => {
    tipAmount.classList.remove("active");
  });
});

// Add event listener for clicks on the tip amount buttons
tipAmounts.forEach((tipAmount) => {
  tipAmount.addEventListener("click", (event) => {
    const currentButton = event.currentTarget;
    tipAmounts.forEach((tipAmount) => {
      if (tipAmount !== currentButton) {
        tipAmount.classList.remove("active");
      }
    });
    activeButton = currentButton; // Update the active button variable
  });
});