Assignment02-Multi-Step-Form-Wizard/script.js

const forms = document.querySelectorAll("[data-form]");
var currentStep = 0;
var currentForm = forms[currentStep];

var data = {};

function incrementStep() {

  // Check if current form is filled
  let inputs = currentForm.getElementsByTagName("input");
  for (const input of inputs) {
    if (!input.checkValidity()) {
      input.reportValidity();
      return;
    }
  }

  try {
    let skills = [];

    data["fullName"] = document.getElementById("full_name").value;
    document.getElementById("full-name-review").innerText = data["fullName"];

    data["email"] = document.getElementById("email").value;
    document.getElementById("email-review").innerText = data["email"];

    data["phone"] = document.getElementById("phone").value;
    document.getElementById("phone-review").innerText = data["phone"];

    data["gender"] = document.querySelector(
      'input[name="gender"]:checked'
    ).value;
    document.getElementById("gender-review").innerText = data["gender"];

    data["age"] = document.getElementById("age").value;
    document.getElementById("age-review").innerText = data["age"];

    data["education"] = document.getElementById("education").value;
    document.getElementById("education-review").innerText = data["education"];

    data["skills"] = document.querySelectorAll('input[name="skills"]:checked');
    // Iterating over the NodeList and extracting the id to store it in skills array
    data["skills"].forEach((skill) => {
      skills.push(skill.getAttribute("id"));
    });
    data["skills"] = skills;
    // To clear previous innerText rendered
    document.getElementById("skills-review").innerText = "";
    document.getElementById("skills-review").innerText = data["skills"];

    data["experience"] = document.getElementById("experience").value;
    document.getElementById("experience-review").innerText = data["experience"];

    data["currentRole"] = document.getElementById("current-role").value;
    document.getElementById("role-review").innerText = data["currentRole"];
  } catch (error) {
    // Do nothing
  }

  //  Changing the visiblity of the form
  currentForm.classList.remove("active");
  currentStep = Math.min(currentStep + 1, forms.length - 1);
  currentForm = forms[currentStep];
  currentForm.classList.add("active");
}

function decrementStep() {
  //  Changing the visiblity of the form

  currentForm.classList.remove("active");
  currentStep = Math.max(currentStep - 1, 0);;
  currentForm = forms[currentStep];
  currentForm.classList.add("active");
}
document
  .querySelector('button[type="submit"]')
  .addEventListener("click", function (event) {
    event.preventDefault();

    window.localStorage.clear();
    window.localStorage.setItem("formData", JSON.stringify(data));
    window.alert("Form submitted successfully");
    window.location.href = "/";
  });