Vanilla Boilerplate Code Problem

Hey Everyone!

I want to apologize in advance regarding my ‘problem’, since it possibly is something quite easy to solve…
Nevertheless I can’t find the solution so maybe someone here can help me out!

I’ve been copying code from the Moralis tutorial: Minting and Selling NFTs Without Paying Gas Fees! NFT Minter Programming Tutorial, I’ve following the same steps, only thing I didn’t do was copying the html layout, otherwise the code is exact the same. Nevertheless I’m getting 3 errors in the console and my image file doesn’t upload…

I’ll show you my code and a screenshot in which you can see the errors.

Thanks in advance! :slight_smile:

MAIN.JS:

/** Connect to Moralis server */
const serverUrl = "https://phnjtrirzatk.usemoralis.com:2053/server";
const appId = "OdLsa9pZ3pPgyn0PLkb4QVWoNIuXBejLlKjYwHao";
Moralis.start({ serverUrl, appId });

/** Add from here down */
async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      initApp()
      document.querySelector("#app").style.display = "block";
   } catch(error) {
     console.log(error)
   }
  }
  else {
    initApp()
  }
}

function initApp(){
  document.querySelector("#app").style.display = "block";
  document.querySelector("#submit_button").oneclick = submit;
}

async function submit(){
        //Get image data
        const input = document.querySelector("#input_image");
        let data = input.files[0];
        const imageFile = new Moralis.File(date.name, data);
        await imageFile.saveIPFS();
        let imageHash = imageFile.hash();
        console.log(imageHash)
        console.log(imageFile.ipfs())
        //Upload imag to IPFS
        //Create metadata with image hash & data
        //Upload to Rarible (plugin)
}

login();

INDEX.HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vanilla Boilerplate</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css" rel="stylesheet"
/>
<style>
    #app{
        display: none;
    }        
</style>
  </head>

<body>
   </div class="container">
      <div class="row">
         <div class="col-md-6 offset-md-3">
             <div class="form_element">
                <input class="form-control" type="text" id="input_name" name="name" placeholder="NFT name">
            </div>
            <div class="form_element">
             <input class="form-control" type="text" id="input_description" name="name" placeholder="NFT description">
            </div>
            <div class="form_element">
             <input class="form-control" type="file" accept="image/png, image/jpeg" id="input_image" name="image">
               </div>
               <div class="form_element">
                <button class="btn btn-primary btn-lg btn-block" id="submit_button">Submit</button>
                  </div>
            </div>
         </div>
       </div>
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

Screenshot 2022-01-05 at 12.05.30

if this is the line that gives that error, it means that it didn’t find a html element with the id app

I tried to delete the line, but when I submit an image it doesn’t display in the console. :confused:

http://127.0.0.1:5500/index.html

that is a local link on local host what you pasted there

Would you suggest to just start the tutorial over, since it’s not working?

You should learn how to fix the problems, you may get in similar problem when you start over

1 Like

Fair enough, do you have any recommendations for other sources/forums since you don’t see the problem yourself?

try to narrow the problem, to what line it is, what it is causing it

Ok I’ll try to do that, thank you for responding! :slight_smile: