Using promise & async/await with HTML Form

<form hidden action="">   <input type="text" name="name" />   <br />   <input type="text" name="username" />   <br />   <input type="password" name="password" />   <br />   <button type="submit">Submit</button>   <button type="button">Close</button></form><button id="newUser">New User</button>

const newUserBtn = document.getElementById("newUser");const formElement = document.querySelector("form");newUserBtn.addEventListener("click", createUser);

//  Async/Await versionconst createUser = async () => {  try {    const data = await form.getData();    // Do something with your data    console.log(data);  } catch (error) {    // if user closes the form    console.log("User canceled the operation");  }};// Then/Catch versionconst createUser = () => {  form    .getData()    .then((data) => {      // Do something with your data      console.log(data);    })    .catch(() => {      // if user closes the form      console.log("User canceled the operation");    });};

const form = {  open() {    // Open your Form, In my case:    formElement.removeAttribute("hidden");  },  close() {    // Close your Form, In my case:    formElement.setAttribute("hidden", "");  },  getData() {    this.open(); // Opening Form    return new Promise((resolve, reject) => {      const submitHandler = (event) => {        // Prevent Default Reload        event.preventDefault();        // Getting Form input values        const name = formElement["name"].value;        const username = formElement["username"].value;        const password = formElement["password"].value;        // Sending fulfilled data        resolve({ name, username, password });        // Closing the Form        this.close();      };      const closeHandler = () => {        // Rejecting the promise        reject();        // Closing the form        this.close();      };      formElement.addEventListener("submit", submitHandler, { once: true });      formElement.addEventListener("reset", closeHandler, { once: true });    });  }};