const form = document.getElementById("MyFormList");
const surName = document.getElementById("inputtype");
const firstName = document.getElementById("Firstname");
const LastName = document.getElementById("Lastname");
const phoneNumber = document.getElementById("phonenumber");
const password = document.getElementById("password");

const message = document.getElementById("message");
const surname = document.getElementById("surname");
const First = document.getElementById("First");
const Last = document.getElementById("Last");
const phone = document.getElementById("phone");
const pass = document.getElementById("pass");

form.addEventListener("submit", function (e) {
    e.preventDefault();

    let surNameValue = surName.value;
    let firstNameValue = firstName.value;
    let LastNameValue = LastName.value;
    let phoneNumberValue = phoneNumber.value;
    let passwordValue = password.value;

    let infoTech = true;

    
    surname.textContent = "";
    First.textContent = "";
    Last.textContent = "";
    phone.textContent = "";
    pass.textContent = "";
    message.textContent = "";

    if (
        surNameValue === "" ||
        firstNameValue === "" ||
        LastNameValue === "" ||
        phoneNumberValue === "" ||
        passwordValue === ""
    ) {
        message.textContent = "Please Fill In The Details";
        message.style.color = "red";
        return;
    }

    if (surNameValue.length < 8) {
        surname.textContent = "Surname must be at least 8 characters";
        surname.style.color = "red";
        infoTech = false;
    }

    if (firstNameValue.length < 8) {
        First.textContent = "First Name must be at least 8 characters";
        First.style.color = "red";
        infoTech = false;
    }

    if (LastNameValue.length < 8) {
        Last.textContent = "Last Name must be at least 8 characters";
        Last.style.color = "red";
        infoTech = false;
    }

    if (phoneNumberValue.length !== 11) {
        phone.textContent = "Phone Number must be exactly 11 digits";
        phone.style.color = "red";
        infoTech = false;
    }

    if (passwordValue.length < 8) {
        pass.textContent = "Password must be at least 8 characters";
        pass.style.color = "red";
        infoTech = false;
    }

   if (infoTech) {
    localStorage.setItem("surname", surNameValue);
    localStorage.setItem("firstname", firstNameValue);
    localStorage.setItem("lastname", LastNameValue);
    localStorage.setItem("phone", phoneNumberValue);
    localStorage.setItem("password", passwordValue);

    message.textContent = "Registration Successful";
    message.style.color = "lightgreen";

    form.reset();
}
});








