breadcrumb-multistepform-webseite/app.js

const steps = Array.from(document.querySelectorAll(".step"));
const dots = Array.from(document.querySelectorAll(".dot"));
const progressBar = document.getElementById("progress-bar");
const form = document.getElementById("lead-form");
const toast = document.getElementById("toast");

let currentStep = 1;
const answers = {};

const updateProgress = () => {
  const progress = ((currentStep - 1) / (steps.length - 1)) * 100;
  progressBar.style.width = `${progress}%`;
  dots.forEach((dot, index) => {
    dot.classList.toggle("active", index < currentStep);
  });
};

const showStep = (step) => {
  steps.forEach((section) => {
    section.classList.remove("active", "fade-in");
    if (Number(section.dataset.step) === step) {
      section.classList.add("active");
      requestAnimationFrame(() => section.classList.add("fade-in"));
    }
  });
  currentStep = step;
  updateProgress();
};

const handleOptionClick = (event) => {
  const button = event.target.closest(".option");
  if (!button) return;
  const step = Number(button.closest(".step").dataset.step);
  const nextStep = Number(button.dataset.next);
  const value = button.dataset.value;
  answers[`step${step}`] = value;
  showStep(nextStep);
};

form.addEventListener("click", handleOptionClick);

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  answers.firstname = data.get("firstname");
  answers.email = data.get("email");

  toast.classList.add("show");
  setTimeout(() => toast.classList.remove("show"), 2400);

  alert("Vielen Dank! Ihre Anfrage ist eingegangen.");
  form.reset();
  showStep(1);
});

showStep(1);