Bare in mind that currently only OpenSea and Zora support the rendering of HTML pages; other marketplaces such as Rarible will render the thumbnail image you specify instead.
For this tutorial, we will create a Magic 8-Ball.
A Magic 8-Ball was an eight-ball-like sphere, that was used for fortune-telling. It was invented in 1946 by Albert C. Carter and Abe Bookman and it allowed users to asks a yes–no question to the ball which would then reveal an answer in a window on the ball.
In our Magic 8-Ball NFT we will create a page with a blue triangle that when a user clicks on it, it will relveal a random answer from a set we will define. So if a user asks "Will I sell my NFT today?" the ball can randomly answer: "You may rely on it".
The code for this Magic 8-Ball HTML page is quite simple. Feel free to go over the code but all this does is render a page with a blue triangle that when you click on it, it shows a random answer from a list of pre-defined answers (there goes all the magic 🔮).
// |- index.html
// |- styles.css
// |- scripts.js
<spanid="answer">Click on the triangle to reveal the answer.</span>
Now that we have our HTML page ready, we need to upload it to a decentralized storage.
You can use any decentralized storage of your choice, but for this example we will upload to IPFS. We will use a service called Pinata which is a pinning service that allows users to host files on the IPFS network. They have a free plan for experimenting so it fits perfectly our current use case.