//target the element and set submit event
    document.querySelector("form").addEventListener("submit", handleSubmit);

    //event function
    const handleSubmit = (e) => {
        e.preventDefault();
        let data = [...e.currentTarget.elements]
            .filter((ele) => ele.type !== "submit")
            .map((ele) => {
                return {
                    [ele.getAttribute("name")]: ele.type === "file" ? ele.files : ele.value,
                };
            });
        console.log(data);
    };