Dateien nach "/" hochladen

app.js

@@ -0,0 +1,56 @@
+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);