script.js

const form = document.getElementById('form');
const password1El = document.getElementById('password1');
const password2El = document.getElementById('password2');
const messageContainer = document.querySelector('.message-container');
const message = document.getElementById('message');

let isValid = false;
let isPasswordsMatch = false;

function validateForm(){
    // Using Contraint API
    isValid = form.checkValidity();
    // Style our main message
    if(isValid){
        messageContainer.style.border = " 1px solid green";
        message.textContent = "Successfully Registered!"
        message.style.color = "green";
    } else {
        messageContainer.style.border = " 1px solid red";
        message.textContent = "Did Not Registered Propertly!"
        message.style.color = "red";
        return;
    }
    
    // checking passwords
        if(password1El.value === password2El.value){
            isPasswordsMatch = true;
            password1El.style.borderColor = "green";
            password2El.style.borderColor = "green"; 
        } else {
            isPasswordsMatch = false;
            password1El.style.borderColor = "red";
            password2El.style.borderColor = "red"; 
            message.textContent = "Passwords Do Not Match!!"
            messageContainer.style.borderColor = "red";
            message.style.color = "red";
            return;
        }
}
function storeFormData(){
    const user = {
        name: form.name.value,
        phone: form.phone.value,
        email: form.email.value,
        website: form.website.value,
        password: form.password.value,
    }
    console.log(user);
}

function processFormData(e){
    e.preventDefault();
    validateForm();
    if(isValid && isPasswordsMatch){
        storeFormData();
    } 
}
form.addEventListener('submit', processFormData);