Buttons wont work for NFT marketplace

Moralis General
#1

Hi guys
I’m trying to get my buttons for my NFT Marketplace to work and I’m struggling with this. Can anyone help me please as I’m new to coding. Ive pasted my HTML and JavaScript below.
Cheers

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Morarable</title>

<div>

    <button id="btnConnect">Connect wallet</button>

    <button id="btnUserInfo">Profile</button>

</div>

<div id="userInfo">

    <h4>User Profile</h4>

    <input type="text" id="txtUsername" required placeholder="Enter username">

    <input type="text" id="txtEmail" placeholder="Enter email">

    <small>Optional</small>

    <img width="50' Height="50" src="" id="imgAvatar" alt="">

    <label for="fileAvatar">Select Avatar</label>

    <input type="file" id="FileAvatar">

   

    <button id="btnLogout">Log out</button>

    <button id="btnCloseUserInfo">Close</button>

    <button id="btnSaveUserInfo">Save</button>

</div>

<script src="https://cdn.jsdeliver.net/npm/web3@latest/dist/web3.min.jsdeliver"></script>

<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

<script src="main.js"> </script>

const serverUrl = “https://giwpmltygioj.usemoralis.com:2053/server”;

const appId = “xuOLzgsgWfTESSw258bWrBlV7f4diP05wWa1MmUU”;

Moralis.start({ serverUrl, appId });

init = async () => {

hideElement(userInfo);

window.web3 = await Moralis.web3.enable();

initUser();

}

initUser = async () => {

if (await Moralis.User.current()){

    hideElement(userConnectbutton);

    showElement(userProfilebutton);

}else{

    showElement(userConnectbutton);

    hideElement(userProfilebutton);

}

}

login = async () => {

try {

    await Moralis.web3.authenticate();

    inituser();

} catch(error) {

    alert(error)

}

}

logout = async () => {

await Moralis.User.logout();

hideElement(userInfo);

initUser();

}

openUserInfo = async () => {

user= await Moralis.current();

if (user){

    const email = user.get('email');

    if(email){

        userEmailField.value = email;

    }else{

        userEmailField.value ="";

    }

    userUsernamefield.value = user.get()

    const userAvatar = user.get('Avatar ');

     if(userAvatar){

        userAvatarImg.src = userAvatar.url();

        showElement(userAvatarImg);

    }else{

        hideElement(userAvatarImg);

    }

    showElement(UserInfo);

}else{

    login();

}

}

saveUserInfo = async () => {

user.set('email', userEmailField.value);

user.set('username', userUsernamefield.value);

if (userAvatarFile.files.length > 0) {

    const Avatar = new Moralis.file("avatar.jpeg", userAvatarFile.files[0])

     user.set('avatar', avatar);

 }

 await user.save();

 alert("User info saved successfully")

 openUserInfo();

}

hideElement = (element) => element.style.display = “none”;

showElement = (element) => element.style.display = “block”;

const userConnectbutton = document.getElementbyid(“btnConnect”);

userConnectbutton.onclick = login;

const userProfilebutton = document.getElementbyid(“btnUserInfo”);

userProfilebutton.onclick = openUserInfo;

const userInfo = document.getElementbyid(“UserInfo”);

const userUsernamefield = document.getElementbyid(“txtUsername”);

const userEmailField = document.getElementbyid(“txtEmail”);

const userAvatarImg = document.getElementbyid(“imgAvatar”);

const userAvatarFile = document.getElementbyid(“fileAvatar”);

document.getElementbyid(“btnCloseUserInfo”).onclick = () => hideElement(userInfo);

document.getElementbyid(“btnLogout”).onclick = logout;

document.getElementbyid(“btnSaveUserInfo”).onclick = saveUserInfo;

init();

Has anyone followed this NFT Minting Marketplace tutorial, and notice the button links are not working https://youtu.be/EMOYpgl5S1w
#2

Please check this thread on how to post code in the forum: READ BEFORE POSTING - How to post code in the forum

Do you see any errors in the browser console?

#3

Hi John
thanks for replying. I’ve reposted the code below and I have no errors in the browser console.

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Morarable</title>

<div>

    <button id="btnConnect">Connect wallet</button>

    <button id="btnUserInfo">Profile</button>

</div>

<div id="userInfo">

    <h4>User Profile</h4>

    <input type="text" id="txtUsername" required placeholder="Enter username">

    <input type="text" id="txtEmail" placeholder="Enter email">

    <small>Optional</small>

    <img width="50' Height="50" src="" id="imgAvatar" alt="">

    <label for="fileAvatar">Select Avatar</label>

    <input type="file" id="FileAvatar">

   

    <button id="btnLogout">Log out</button>

    <button id="btnCloseUserInfo">Close</button>

    <button id="btnSaveUserInfo">Save</button>

</div>

<script src="https://cdn.jsdeliver.net/npm/web3@latest/dist/web3.min.jsdeliver"></script>

<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

<script src="main.js"> </script>
`Preformatted text`

const serverUrl = “https://giwpmltygioj.usemoralis.com:2053/server”;

const appId = “xuOLzgsgWfTESSw258bWrBlV7f4diP05wWa1MmUU”;

Moralis.start({ serverUrl, appId });

init = async () => {

hideElement(userInfo);

window.web3 = await Moralis.web3.enable();

initUser();

}

initUser = async () => {

if (await Moralis.User.current()){

    hideElement(userConnectbutton);

    showElement(userProfilebutton);

}else{

    showElement(userConnectbutton);

    hideElement(userProfilebutton);

}

}

login = async () => {

try {

    await Moralis.web3.authenticate();

    inituser();

} catch(error) {

    alert(error)

}

}

logout = async () => {

await Moralis.User.logout();

hideElement(userInfo);

initUser();

}

openUserInfo = async () => {

user= await Moralis.current();

if (user){

    const email = user.get('email');

    if(email){

        userEmailField.value = email;

    }else{

        userEmailField.value ="";

    }

    userUsernamefield.value = user.get()

    const userAvatar = user.get('Avatar ');

     if(userAvatar){

        userAvatarImg.src = userAvatar.url();

        showElement(userAvatarImg);

    }else{

        hideElement(userAvatarImg);

    }

    showElement(UserInfo);

}else{

    login();

}

}

saveUserInfo = async () => {

user.set('email', userEmailField.value);

user.set('username', userUsernamefield.value);

if (userAvatarFile.files.length > 0) {

    const Avatar = new Moralis.file("avatar.jpeg", userAvatarFile.files[0])

     user.set('avatar', avatar);

 }

 await user.save();

 alert("User info saved successfully")

 openUserInfo();

}

hideElement = (element) => element.style.display = “none”;

showElement = (element) => element.style.display = “block”;

const userConnectbutton = document.getElementbyclassname(“btnConnect”);

userConnectbutton.onclick = login;

const userProfilebutton = document.getElementbyclassname(“btnUserInfo”);

userProfilebutton.onclick = openUserInfo;

const userInfo = document.getElementbyclassname(“UserInfo”);

const userUsernamefield = document.getElementbyclassname(“txtUsername”);

const userEmailField = document.getElementbyclassname(“txtEmail”);

const userAvatarImg = document.getElementbyclassname(“imgAvatar”);

const userAvatarFile = document.getElementbyclassname(“fileAvatar”);

document.getElementbyclassname(“btnCloseUserInfo”).onclick = () => hideElement(userInfo);

document.getElementbyclassname(“btnLogout”).onclick = logout;

document.getElementbyclassname(“btnSaveUserInfo”).onclick = saveUserInfo;

init();Preformatted text

#4 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Morarable</title>

</head>

<body>

    <div>

        <button id="btnConnect">Connect wallet</button>

        <button id="btnUserInfo">Profile</button>

    </div>

    <div id="userInfo">

        <h4>User Profile</h4>

        <input type="text" id="txtUsername" required placeholder="Enter username">

        <input type="text" id="txtEmail" placeholder="Enter email">

        <small>Optional</small>

        <img width="50' Height="50" src="" id="imgAvatar" alt="">

        <label for="fileAvatar">Select Avatar</label>

        <input type="file" id="FileAvatar">

       

        <button id="btnLogout">Log out</button>

        <button id="btnCloseUserInfo">Close</button>

        <button id="btnSaveUserInfo">Save</button>

    </div>

    <script src="https://cdn.jsdeliver.net/npm/web3@latest/dist/web3.min.jsdeliver"></script>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    <script src="main.js"> </script>

</body>

</html>

const serverUrl = "https://giwpmltygioj.usemoralis.com:2053/server";

const appId = "xuOLzgsgWfTESSw258bWrBlV7f4diP05wWa1MmUU";

Moralis.start({ serverUrl, appId });

init = async () => {

    hideElement(userInfo);

    window.web3 = await Moralis.web3.enable();

    initUser();

}

initUser = async () => {

    if (await Moralis.User.current()){

        hideElement(userConnectbutton);

        showElement(userProfilebutton);

    }else{

        showElement(userConnectbutton);

        hideElement(userProfilebutton);

    }

}

login = async () => {

    try {

        await Moralis.web3.authenticate();

        inituser();

    } catch(error) {

        alert(error)

    }

}

logout = async () => {

    await Moralis.User.logout();

    hideElement(userInfo);

    initUser();

}

openUserInfo = async () => {

    user= await Moralis.current();

    if (user){

        const email = user.get('email');

        if(email){

            userEmailField.value = email;

        }else{

            userEmailField.value ="";

        }

        userUsernamefield.value = user.get()

        const userAvatar = user.get('Avatar ');

         if(userAvatar){

            userAvatarImg.src = userAvatar.url();

            showElement(userAvatarImg);

        }else{

            hideElement(userAvatarImg);

        }

        showElement(UserInfo);

    }else{

        login();

    }

}

saveUserInfo = async () => {

    user.set('email', userEmailField.value);

    user.set('username', userUsernamefield.value);

    if (userAvatarFile.files.length > 0) {

        const Avatar = new Moralis.file("avatar.jpeg", userAvatarFile.files[0])

         user.set('avatar', avatar);

     }

     await user.save();

     alert("User info saved successfully")

     openUserInfo();

}

hideElement = (element) => element.style.display = "none";

showElement = (element) => element.style.display = "block";

const userConnectbutton = document.getElementbyclassname("btnConnect");

userConnectbutton.onclick = login;

const userProfilebutton = document.getElementbyclassname("btnUserInfo");

userProfilebutton.onclick   = openUserInfo;

const userInfo = document.getElementbyclassname("UserInfo");

const userUsernamefield = document.getElementbyclassname("txtUsername");

const userEmailField = document.getElementbyclassname("txtEmail");

const userAvatarImg = document.getElementbyclassname("imgAvatar");

const userAvatarFile = document.getElementbyclassname("fileAvatar");

document.getElementbyclassname("btnCloseUserInfo").onclick = () => hideElement(userInfo);

document.getElementbyclassname("btnLogout").onclick = logout;

document.getElementbyclassname("btnSaveUserInfo").onclick = saveUserInfo;

init();
#5

Replace all getElementbyclassname with getElementById.

and replace this with await Moralis.authenticate().

I think this should fix it.

Has anyone followed this NFT Minting Marketplace tutorial, and notice the button links are not working https://youtu.be/EMOYpgl5S1w
#6

Hi John
Ill try that and thank you for your help I appreciate it.
cheers

#7

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Morarables</title>

</head>

<body>

    <div>

        <button id="btnConnect">Connect Wallet</button>

        <button id="btnUserInfo">Profile</button>

    </div>

    <div Id="UserInfo">

        <h4>User Profile</h4>

        <input type="text" id="txtUsername" required placeholder="Enter Username">

        <input type="text" id="txtEmail" placeholder="Enter Email">

        <small>Optional</small>

        <img width="50" hieght="50" src="" id="imgAvatar" alt="">

        <label for="fileAvatar">Select Avatar</label>

        <input type="file" id="fileAvatar">

        <button id="btnlogOut">Log out</button>

        <button id="btnCloseUserInfo">Close</button>

        <button id="btnSaveUserInfo">Save</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>    

    <script src="main.js"></script>

</body>

</html>

Javascript

Moralis.initialize("xuOLzgsgWfTESSw258bWrBlV7f4diP05wWa1MmUU");

Moralis.serverURL = "https://giwpmltygioj.usemoralis.com:2053/server"

init = async () => {

    hideElement(UserInfo);

    await Moralis.enableWeb3();

        initUser();

}

initUser = async () => {

    if (await Moralis.User.current()){

        hideElement(userConnectButton);

        showElement(userProfileButton);

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

    }

}

login = async () => {

    try {

        await Moralis.authenticate();

        initUser();

    } catch (error) {

        alert(error)

    }

}

logout = async () => {

    await Moralis.User.logout();

    hideElement(userInfo);

    initUser();

}

openUserInfo = async () => {

    user = await Moralis.User.current();

    if(openUserInfo){

        const email = user.get('email');

        if(email){

            userEmailField.value = email;

        }else{

            userEmailField.value = "";

        }

       

        userUsernameField.value = user.get('userName');

        const userAvatar = user.get(Avatar);

        if(userAvatar){

            userAvatarImg.src = userAvatar.url();

            showElement(userAvatarImg);

        }else{

            hideElement(userAvatarImg);

        }

        showElement(UserInfo);

    }else{

        login();

    }

}

   

saveUserInfo = async () => {

    user.set('email', userEmailField.value);

    user.set('username', userUsernameField.value);

    if (userAvatarFile.files.length > 0) {

        const avatar = new Moralis.File("avatar.jpg", userAvatarFile.Files[0]);

        user.set('avatar', avatar);

    }

    await user.save();

    alert("User info saved successfully!");

    openUserInfo(btnUserInfo);

}

hideElement = (element) => element.style.display = "none";

showElement = (element) => element.style.display = "block";

const userConnectButton = document.getElementById("btnConnect");

userConnectButton.onclick = login;

const userProfileButton = document.getElementsById("btnUserInfo");

document.getElementById("btnUserInfo").onclick = () => showElement(openUserInfo);

userProfileButton.onclick = openUserInfo;

const userInfo = document.getElementById("UserInfo");

const userUsernameField = document.getElementById("txtUsername");

const userEmailField = document.getElementById("txtEmail");

const userAvatarImg = document.getElementById("imgAvatar");

const userAvatarFile = document.getElementById("fileAvatar");

document.getElementById("btnCloseUserInfo").onclick = () => hideElement(UserInfo);

document.getElementById("btnLogOut").onclick = logout;

document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

init();
#8

There is a typo here at getElementsById, change it to getElementById.

Here change the btnLogOut name to btnlogOut

I still think there are other errors. So make sure to check the browser console for errors while testing.

#9

Hi John
Thank you for your help yesterday.
my next issue if you can help at all is with my create button. its meant to save the name, description, price and the NFT chosen by the user. Everything works up to that part.
Thanks in advance. Have a good weekend.
Cheers

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Morarables</title>

</head>

<body>

    <div>

        <button id="btnConnect">Connect Wallet</button>

        <button id="btnUserInfo">Profile</button>

        <button id="btnOpenCreateItem">Create</button>

    </div>

    <div id="userInfo">

        <h4>User Profile</h4>

        <input type="text" id="txtUsername" required placeholder="Enter username">

        <input type="text" id="txtEmail" placeholder="Enter email">

        <small>Optional</small>

        <img width="50" height="50" src="" id="imgAvatar" alt="">

        <label for="fileAvatar">Select Avatar</label>

        <input type="file" id="fileAvatar">

        <button id="btnLogOut">Log out</button>

        <button id="btnCloseUserInfo">Close</button>

        <button id="btnSaveUserInfo">Save</button>

    </div>

    <div id="createItem">

        <h4>Create Item</h4>

        <input type="text" id="txtCreateItemName" required placeholder="Enter name">

        <textarea id="txtCreateItemDescription" cols="30" rows="5" placeholder="Enter description"></textarea>

        <input type="number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter price" required>

   

        <label for="selectCreateItemStatus">Status</label>

        <select id="selectCreateItemStatus">        

            <option value="0">Not for sale</option>

            <option value="1">Instant buy</option>

            <option value="2">Accept Offers</option>

        </select>

        <label for="fileCreateItemFile">Select File</label>

        <input type="file" id="fileCreateItemFile">

        <button id="btnCloseCreateItem">Close</button>

        <button id="btnCreateItem">Create!</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    <script src="main.js"></script>

</body>

</html>

Javascript

const serverUrl = "https://da83jdqdl0gt.usemoralis.com:2053/server";

const appId = "JllyuQ1vxxN5cY6WSllUYPm9IWzeyKnh6ZvZ9sS9";

Moralis.start({ serverUrl, appId });

init = async () => {

    hideElement(userInfo);

    hideElement(createItemForm);

    await Moralis.enableWeb3();

        initUser();

}

initUser = async () => {

    if (await Moralis.User.current()){

        hideElement(userConnectButton);

        showElement(userProfileButton);

        showElement(openCreateItemButton);

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

        hideElement(openCreateItemButton);

        hideElement(createItemForm);

    }

}

login = async () => {

    try {

        await Moralis.authenticate();

        initUser();

    } catch (error) {

        alert(error)

    }

}

logout = async () => {

    await Moralis.User.logOut();

    hideElement(userInfo);

    initUser();

}

openUserInfo = async () => {

    user = await Moralis.User.current();

    if (user){    

        const email = user.get('email');

        if(email){

            userEmailField.value = email;

        }else{

            userEmailField.value = "";

        }

        userNameField.value = user.get('username');

        const userAvatar = user.get('avatar');

        if(userAvatar){

            userAvatarImg.src = userAvatar.url();

            showElement(userAvatarImg);

        }else{

            hideElement(userAvatarImg);

        }

        showElement(userInfo);

    }else{

        login();

    }

}

saveUserInfo = async () => {

    user.set('email', userEmailField.value);

    user.set('username', userNameField.value);

    if (userAvatarFile.files.length > 0) {

        const avatar = new Moralis.File("avatar1.jpg", userAvatarFile.files[0]);

        user.set('avatar', avatar);

    }

    await user.save();

    alert("User info saved successfully!");

    openUserInfo();

}

CreateItem = async () => {      

    if (createItemFile.files.length == [0]){

        alert("Please select a file!");

        return;

    }else if (createItemNameField.files.length == 0){

        alert("Please give the item a name!");

        return;

    }

    const nftFile = new Moralis.File("nftFile.jpg", createItemFile.files[0]);

    await nftFile.saveIPFS();

    const nftFilePath = nftFile.ipfs();

    const nftFileHash = nftFile.hash();

    const Metadata = {

        name: createItemNameField.value,

        description: createItemDescriptionField.value,

        nftFilePath: nftFilePath,

        nftFileHash: nftFileHash

    };

    const nftFileMetadataFile = new Moralis.file("Metadata.json", { base64 : btoa(JSON.stringify(Metadata))});

    await nftFileMetadataFile.saveIPFS();

    const nftFileMetadataFilePath = nftFileMetadata.ipfs();

    const nftFileMetadataFileHash = nftFileMetadata.hash();

    const Item = Moralis.Object.extend("Item");

    const item = new Item();

    item.set('name', createItemNameField.value);

    item.set('description', createItemDescriptionField.value);

    item.set('nftFilePath', nftFilePath);

    item.set('nftFileHash', nftFileHash);

    item.set('metadataFilePath', nftFileMetadataFilePath);

    item.set('metadataFileHash', nftFileMetadataFileHash);

    await item.save();

    console.log(item);

}

hideElement = (element) => element.style.display = "none";

showElement = (element) => element.style.display = "block";

//Navbar

const userConnectButton = document.getElementById("btnConnect");

userConnectButton.onclick = login;

const userProfileButton = document.getElementById("btnUserInfo");

userProfileButton.onclick = openUserInfo;

const openCreateItemButton = document.getElementById("btnOpenCreateItem");

openCreateItemButton.onclick = () => showElement(createItemForm);

//User Profile

const userInfo = document.getElementById("userInfo");

const userNameField = document.getElementById("txtUsername");

const userEmailField = document.getElementById("txtEmail");

const userAvatarImg = document.getElementById("imgAvatar");

const userAvatarFile = document.getElementById("fileAvatar");

document.getElementById("btnCloseUserInfo").onclick = () => hideElement(userInfo);

document.getElementById("btnLogOut").onclick = logout;

document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

//Item Creation

const createItemForm = document.getElementById("createItem");

const createItemNameField = document.getElementById("txtCreateItemName");

const createItemDescriptionField = document.getElementById("txtCreateItemDescription");

const createItemPriceField = document.getElementById("numCreateItemPrice");

const createItemStatusField = document.getElementById("selectCreateItemStatus");

const createItemFile = document.getElementById("fileCreateItemFile");

document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);

init();
#10

Use this code in your js file. I have made some changes to this.

const serverUrl = "https://da83jdqdl0gt.usemoralis.com:2053/server";
const appId = "JllyuQ1vxxN5cY6WSllUYPm9IWzeyKnh6ZvZ9sS9";
      Moralis.start({ serverUrl, appId });

      init = async () => {
        hideElement(userInfo);

        hideElement(createItemForm);

        await Moralis.enableWeb3();

        initUser();
      };

      initUser = async () => {
        if (await Moralis.User.current()) {
          hideElement(userConnectButton);

          showElement(userProfileButton);

          showElement(openCreateItemButton);
        } else {
          showElement(userConnectButton);

          hideElement(userProfileButton);

          hideElement(openCreateItemButton);

          hideElement(createItemForm);
        }
      };

      login = async () => {
        try {
          await Moralis.authenticate();

          initUser();
        } catch (error) {
          alert(error);
        }
      };

      logout = async () => {
        await Moralis.User.logOut();

        hideElement(userInfo);

        initUser();
      };

      openUserInfo = async () => {
        user = await Moralis.User.current();

        if (user) {
          const email = user.get("email");

          if (email) {
            userEmailField.value = email;
          } else {
            userEmailField.value = "";
          }

          userNameField.value = user.get("username");

          const userAvatar = user.get("avatar");

          if (userAvatar) {
            userAvatarImg.src = userAvatar.url();

            showElement(userAvatarImg);
          } else {
            hideElement(userAvatarImg);
          }

          showElement(userInfo);
        } else {
          login();
        }
      };

      saveUserInfo = async () => {
        user.set("email", userEmailField.value);

        user.set("username", userNameField.value);

        if (userAvatarFile.files.length > 0) {
          const avatar = new Moralis.File(
            "avatar1.jpg",
            userAvatarFile.files[0]
          );

          user.set("avatar", avatar);
        }

        await user.save();

        alert("User info saved successfully!");

        openUserInfo();
      };

      CreateItem = async () => {
        if (createItemFile.files.length == [0]) {
          alert("Please select a file!");

          return;
        } else if (createItemNameField.value.length == 0) {
          alert("Please give the item a name!");

          return;
        }

        const nftFile = new Moralis.File(
          "nftFile.jpg",
          createItemFile.files[0]
        );

        await nftFile.saveIPFS();

        const nftFilePath = nftFile.ipfs();

        const nftFileHash = nftFile.hash();

        const Metadata = {
          name: createItemNameField.value,

          description: createItemDescriptionField.value,

          nftFilePath: nftFilePath,

          nftFileHash: nftFileHash,
        };

        const nftFileMetadataFile = new Moralis.File("Metadata.json", {
          base64: btoa(JSON.stringify(Metadata)),
        });

        await nftFileMetadataFile.saveIPFS();

        const nftFileMetadataFilePath = nftFileMetadataFile.ipfs();

        const nftFileMetadataFileHash = nftFileMetadataFile.hash();

        const Item = Moralis.Object.extend("Item");

        const item = new Item();

        item.set("name", createItemNameField.value);

        item.set("description", createItemDescriptionField.value);

        item.set("nftFilePath", nftFilePath);

        item.set("nftFileHash", nftFileHash);

        item.set("metadataFilePath", nftFileMetadataFilePath);

        item.set("metadataFileHash", nftFileMetadataFileHash);

        await item.save();

        console.log(item);
      };

      hideElement = (element) => (element.style.display = "none");

      showElement = (element) => (element.style.display = "block");

      //Navbar

      const userConnectButton = document.getElementById("btnConnect");

      userConnectButton.onclick = login;

      const userProfileButton = document.getElementById("btnUserInfo");

      userProfileButton.onclick = openUserInfo;

      const openCreateItemButton = document.getElementById("btnOpenCreateItem");

      openCreateItemButton.onclick = () => showElement(createItemForm);

      //User Profile

      const userInfo = document.getElementById("userInfo");

      const userNameField = document.getElementById("txtUsername");

      const userEmailField = document.getElementById("txtEmail");

      const userAvatarImg = document.getElementById("imgAvatar");

      const userAvatarFile = document.getElementById("fileAvatar");

      document.getElementById("btnCloseUserInfo").onclick = () =>
        hideElement(userInfo);

      document.getElementById("btnLogOut").onclick = logout;

      document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

      //Item Creation

      const createItemForm = document.getElementById("createItem");

      const createItemNameField = document.getElementById("txtCreateItemName");

      const createItemDescriptionField = document.getElementById(
        "txtCreateItemDescription"
      );

      const createItemPriceField =
        document.getElementById("numCreateItemPrice");

      const createItemStatusField = document.getElementById(
        "selectCreateItemStatus"
      );

      const createItemFile = document.getElementById("fileCreateItemFile");

      document.getElementById("btnCloseCreateItem").onclick = () =>
        hideElement(createItemForm);

      btnCreateItem.onclick = CreateItem;

      init();