🌐Building a Simple NFT Minting Website | by Bishal Devkota

Create app.js in the same folder:

let web3;
let contract;
let userAccount;
const contractAddress = "<YOUR_CONTRACT_ADDRESS>";
const contractABI = [ /* Paste your contract ABI here */ ];
window.onload = () => {
const connectButton = document.getElementById("connectButton");
const mintButton = document.getElementById("mintButton");
const status = document.getElementById("status");
connectButton.onclick = async () => {
if (window.ethereum) {
try {
await window.ethereum.request({ method: "eth_requestAccounts" });
web3 = new Web3(window.ethereum);
const accounts = await web3.eth.getAccounts();
userAccount = accounts[0];
status.innerText = `Connected: ${userAccount}`;
mintButton.disabled = false;
contract = new web3.eth.Contract(contractABI, contractAddress);
} catch (err) {
status.innerText = "Connection failed.";
}
} else {
alert("Please install MetaMask!");
}
};
mintButton.onclick = async () => {
const metadataURI = document.getElementById("metadataURI").value.trim();
if (!metadataURI) {
alert("Enter metadata URI");
return;
}
status.innerText = "Minting NFT...";
try {
const tx = await contract.methods
.mintNFT(userAccount, metadataURI)
.send({ from: userAccount });
status.innerText = `NFT minted! Tx hash: ${tx.transactionHash}`;
} catch (err) {
status.innerText = "Minting failed.";
console.error(err);
}
};
};