Purple_Envelop_Order_Site/purple-envelope-order-site/script.js

const form = document.getElementById("orderForm");
const quantityInput = document.getElementById("quantity");
const turnaround = document.getElementById("turnaround");
const envelopeSupply = document.getElementById("envelopeSupply");
const serviceInputs = [...document.querySelectorAll('input[name="services"]')];

const summaryQuantity = document.getElementById("summaryQuantity");
const serviceSummary = document.getElementById("serviceSummary");
const setupFeeElement = document.getElementById("setupFee");
const rushLine = document.getElementById("rushLine");
const rushFeeElement = document.getElementById("rushFee");
const estimatedTotal = document.getElementById("estimatedTotal");
const dialog = document.getElementById("confirmationDialog");

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
});

const number = new Intl.NumberFormat("en-US");

function calculateOrder() {
  const quantity = Math.max(Number(quantityInput.value) || 0, 0);
  const setupFee = quantity > 0 ? 45 : 0;
  let subtotal = setupFee;
  const lines = [];

  serviceInputs.forEach((input) => {
    if (!input.checked) return;

    const rate = Number(input.dataset.rate || 0);
    const flat = Number(input.dataset.flat || 0);
    const amount = flat || quantity * rate;
    subtotal += amount;

    lines.push({
      label: input.dataset.label,
      amount
    });
  });

  if (envelopeSupply.value === "vendor") {
    const envelopeCost = quantity * 0.18;
    subtotal += envelopeCost;
    lines.push({
      label: "Purple envelope stock",
      amount: envelopeCost
    });
  }

  const rushFee = turnaround.value === "rush" ? subtotal * 0.25 : 0;
  const total = subtotal + rushFee;

  summaryQuantity.textContent = number.format(quantity);
  setupFeeElement.textContent = currency.format(setupFee);
  rushFeeElement.textContent = currency.format(rushFee);
  estimatedTotal.textContent = currency.format(total);

  rushLine.hidden = turnaround.value !== "rush";

  serviceSummary.innerHTML = lines
    .map(
      (line) => `
        <div class="summary-line">
          <span>${line.label}</span>
          <strong>${currency.format(line.amount)}</strong>
        </div>
      `
    )
    .join("");
}

function showSelectedFile(input) {
  const uploadBox = input.closest(".upload-box");
  const strong = uploadBox.querySelector("strong");
  const small = uploadBox.querySelector("small");

  if (input.files.length) {
    strong.textContent = input.files[0].name;
    small.textContent = "File selected";
  }
}

quantityInput.addEventListener("input", calculateOrder);
turnaround.addEventListener("change", calculateOrder);
envelopeSupply.addEventListener("change", calculateOrder);
serviceInputs.forEach((input) => input.addEventListener("change", calculateOrder));

document.querySelectorAll('input[type="file"]').forEach((input) => {
  input.addEventListener("change", () => showSelectedFile(input));
});

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }

  dialog.showModal();
});

dialog.querySelectorAll(".dialog-close, .dialog-button").forEach((button) => {
  button.addEventListener("click", () => dialog.close());
});

dialog.addEventListener("click", (event) => {
  const bounds = dialog.getBoundingClientRect();
  const clickedOutside =
    event.clientX < bounds.left ||
    event.clientX > bounds.right ||
    event.clientY < bounds.top ||
    event.clientY > bounds.bottom;

  if (clickedOutside) dialog.close();
});

document.getElementById("year").textContent = new Date().getFullYear();

calculateOrder();