High School STEM Project

Welcome to the NFT Marketplace Simulation! In this project, students will learn about blockchain technology, the basics of NFTs (Non-Fungible Tokens), and how to simulate an NFT marketplace where users can mint, buy, and sell NFTs. We’ll guide you through coding the entire simulation, making it both educational and fun. Ready to dive into the future of digital assets?

Learning Objectives:

  • Understand the concept of NFTs and their role in blockchain.
  • Learn how to simulate a marketplace where NFTs are traded.
  • Gain coding experience with smart contracts (simulated, no blockchain interaction).
  • Use JavaScript, HTML, and CSS to build a simple NFT marketplace simulation.

What You’ll Need:

  • Basic knowledge of JavaScript and web development.
  • A text editor like Visual Studio Code or Sublime Text.
  • A web browser (Google Chrome or Firefox).
  • Node.js (optional, but helpful for running a local server).
  • GitHub account (optional, for hosting the project).

Setup:

  1. Create a new project folder:
  • Create a folder named NFT-Marketplace where you’ll store your HTML, CSS, and JavaScript files.
  1. Download Node.js (Optional, for testing):
  • Head to Node.js and download the latest version. This will allow you to run your project locally.
  1. Basic HTML Structure:
  • Start by creating a simple HTML file to serve as the foundation of the project.
HTML
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>NFT Marketplace Simulation</title>
       <link rel="stylesheet" href="style.css">
   </head>
   <body>
       <header>
           <h1>NFT Marketplace Simulation</h1>
           <nav>
               <ul>
                   <li><a href="#">Home</a></li>
                   <li><a href="#">Create NFT</a></li>
                   <li><a href="#">Marketplace</a></li>
               </ul>
           </nav>
       </header>

       <main>
           <section id="create-nft">
               <h2>Create Your Own NFT</h2>
               <label for="nft-name">NFT Name:</label>
               <input type="text" id="nft-name" placeholder="Enter NFT name">
               <button id="mint-nft">Mint NFT</button>
           </section>

           <section id="marketplace">
               <h2>Marketplace</h2>
               <div id="nft-list"></div>
           </section>
       </main>

       <script src="app.js"></script>
   </body>
   </html>
  1. Add Some Style with CSS:
  • In the same folder, create a file named style.css and add some basic styling for the layout.
CSS
   body {
       font-family: Arial, sans-serif;
       background-color: #f0f0f0;
       margin: 0;
       padding: 0;
   }

   header {
       background-color: #333;
       color: white;
       padding: 1em;
       text-align: center;
   }

   nav ul {
       list-style-type: none;
       padding: 0;
   }

   nav ul li {
       display: inline;
       margin: 0 10px;
   }

   nav ul li a {
       color: white;
       text-decoration: none;
   }

   main {
       padding: 2em;
   }

   section {
       margin-bottom: 2em;
   }

   input {
       margin-right: 10px;
   }

   #nft-list {
       display: flex;
       flex-wrap: wrap;
   }

   .nft-item {
       border: 1px solid #ccc;
       padding: 10px;
       margin: 10px;
       width: 200px;
       background-color: white;
   }

Building the NFT Logic (JavaScript):

In this step, we’ll simulate minting and trading NFTs using JavaScript arrays to represent the NFTs and their metadata.

  1. Create app.js:
  • This is where all the marketplace logic will live. Create an app.js file and add the following code:
JavaScript
   // Array to hold minted NFTs
   let nfts = [];

   // Function to mint a new NFT
   function mintNFT() {
       const nftName = document.getElementById('nft-name').value;
       if (nftName.trim() === '') {
           alert('NFT name is required!');
           return;
       }

       const newNFT = {
           name: nftName,
           price: Math.floor(Math.random() * 100) + 1, // Random price between 1 and 100
           owner: 'You',
           forSale: true
       };

       nfts.push(newNFT);
       displayNFTs();
       document.getElementById('nft-name').value = ''; // Clear input field
   }

   // Function to display NFTs in the marketplace
   function displayNFTs() {
       const nftList = document.getElementById('nft-list');
       nftList.innerHTML = ''; // Clear current list

       nfts.forEach((nft, index) => {
           const nftItem = document.createElement('div');
           nftItem.classList.add('nft-item');
           nftItem.innerHTML = `
               <h3>${nft.name}</h3>
               <p>Price: ${nft.price} ETH</p>
               <p>Owner: ${nft.owner}</p>
               ${nft.forSale ? `<button onclick="buyNFT(${index})">Buy</button>` : '<p>Sold</p>'}
           `;
           nftList.appendChild(nftItem);
       });
   }

   // Function to simulate buying an NFT
   function buyNFT(index) {
       if (!nfts[index].forSale) {
           alert('This NFT is no longer for sale.');
           return;
       }

       nfts[index].owner = 'Someone else'; // Simulate transfer of ownership
       nfts[index].forSale = false; // Mark as sold
       displayNFTs();
   }

   // Event listener for the "Mint NFT" button
   document.getElementById('mint-nft').addEventListener('click', mintNFT);
  1. Explanation of Code:
  • Minting NFTs: Users can create NFTs by typing a name and clicking “Mint NFT.” Each NFT gets a random price and is initially owned by the user.
  • Displaying NFTs: We list the NFTs in the marketplace. Each item shows the NFT name, price, and owner, along with a “Buy” button if it’s for sale.
  • Buying NFTs: When the user clicks “Buy,” the ownership is transferred, and the NFT is marked as sold.

Testing the Project:

  1. Open the HTML File: You can open your index.html file directly in a browser or run a local server using Node.js.
  • To test locally with Node.js, navigate to the project folder and use a simple command like:
    npx http-server
  1. Simulate Minting and Buying:
  • Go to the Create NFT section and mint an NFT by entering a name. It should appear in the marketplace with a random price.
  • Click “Buy” to simulate purchasing the NFT. The ownership should change, and the NFT will no longer be for sale.

Stretch Goals:

  • Add Images: Let users upload images to go along with their NFTs. Display the image with the NFT name and price.
  • Smart Contracts Simulation: Add more logic to simulate how smart contracts work with NFTs.
  • Blockchain Integration: For advanced users, try connecting the app to a test blockchain like Ethereum’s Rinkeby testnet using web3.js.

STEM Breakdown:

  • Science: Understand the concept of digital ownership and the role blockchain plays in securing assets.
  • Technology: Use web technologies (HTML, CSS, JS) to simulate a real-world application of NFTs.
  • Engineering: Build and design the marketplace, creating the logical flow of minting, buying, and selling NFTs.
  • Mathematics: Use random numbers and pricing models to simulate the economics of the NFT marketplace.

Conclusion:

This project introduces high school students to the exciting world of NFTs and blockchain technology while reinforcing important coding skills. By the end of the project, students will have simulated an entire marketplace where they can mint, display, and sell digital assets. With weekly updates, we’ll continue to add more features, so stay tuned for the next exciting STEM challenge! By adding new features, your NFT Marketplace Simulation becomes more interactive, dynamic, and reflective of real-world NFT platforms. Students will not only learn the basics of NFTs but also develop more advanced skills like building auction systems, adding a leaderboard, and (for advanced learners) even interacting with real blockchain technology.

Categorized in:

STEM