We will briefly describe the main parts of the code, and then present the overall file. Again, the aim here isn't to provide a tutorial on HTML or frontends in general, but to give an example of one way of creating an ICO web page.
Starting at the end of the file, we import a series of JavaSscript files:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/truffle-contract.min.js"></script>
<script src="js/app.js"></script>
The imports are described as follows:
- jquery.js is sourced from a remote CDN, and required by Bootstrap.
- boostrap.min.js, together with the associated CSS, is sourced from a CDN, and provides the styling for our frontend.
- web3.min.js is sourced from a CDN, and allows us to interact with the blockchain via a web3 provider.
- truffle-contract.min.js is sourced from a CDN, and provides a more convenient interface through which we can interact with our contract.
- app.js is sourced from our js/ directory, and will handle the interactions of users with our web page.
Now that when we have the appropriate styling imported in the form of Bootstrap, we can begin to create the rest of the page.
We begin with a heading:
<div class="col-lg-12">
<h1 class="text-center" style="margin-top: 100px">
Packt Token ICO Sale
</h1>
<hr />
</div>
Note that any additional styling, outside of that provided by Bootstrap, will be defined inline, rather than creating a separate .css file.
The next section provides the user with information about the sale, such as the token price, together with information personal to them, such as their address and how many tokens they have purchased so far. Note that there is an assumption that they are using a browser with MetaMask installed. The enclosing div is defined as follows:
<div id="content" class="text-center" style="display: none;">
<p>
This is the <span id="tokenName"></span> sale.
The token price is <span id="tokenPrice"></span> ETH.
</p>
<p>
Your token balance is: <span id="tokenBalance"></span>
<span id="tokenSymbol"></span>
</p>
<p>Your active account is: <span id="accountAddress"></span></p>
</div>
Here, the ID values will be used by app.js to render information read from the contracts.
To enable users to enter the number of tokens required, the page requires a form, which, in this case, makes heavy use of Bootstrap's styling. Note also that the onSubmit handler is defined as a function in app.js, which we'll describe later in the app.js section:
<form onSubmit="App.buyTokens(); return false;" role="form">
<div class="form-group">
<div class="input-group mb-3">
<input id="numberOfTokens" type="number" class="form-control" aria-describedby="basic-addon2" value="1" min="1" pattern="[0-9]">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="submit">
Buy PET Tokens
</button>
</div>
</div>
</div>
</form>
Finally, to give users an understanding of our ICO's progress, we show a progress bar:
<div>
<div class="progress">
<div id="progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>
<span id="tokensSold"></span> / <span id="tokensAvailable"></span>
</p>
<hr />
</div>
With all the main parts of the user interface defined, our index.html file will look like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Packt Token ICO Sale</title>
</head>
<body>
<div class="container" style="width: 650px">
<div class="col-lg-12">
<h1 class="text-center" style="margin-top: 100px">
Packt Token ICO Sale
</h1>
<hr />
</div>
<div id="contentLoader">
<p class="text-center">Loading...</p>
</div>
<div id="content" class="text-center" style="display: none;">
<p>
This is the <span id="tokenName"></span> sale.
The token price is <span id="tokenPrice"></span> ETH.
</p>
<p>
Your token balance is: <span id="tokenBalance"></span> <span id="tokenSymbol"></span>
</p>
<p>Your active account is: <span id="accountAddress"></span></p>
<br />
<form onSubmit="App.buyTokens(); return false;" role="form">
<div class="form-group">
<div class="input-group mb-3">
<input
id="numberOfTokens"
type="number"
class="form-control"
aria-describedby="basic-addon2"
value="1"
min="1"
pattern="[0-9]">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="submit">
Buy PET Tokens
</button>
</div>
</div>
</div>
</form>
<br>
<div class="progress">
<div
id="progress"
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p><span id="tokensSold"></span> / <span id="tokensAvailable"></span></p>
<hr />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/truffle-contract.min.js"</script>
<script src="js/app.js"></script>
</body>
</html>
With the HTML code complete, we can turn our attention to the JavaSscript. Most of the Javascript code is sourced directly from content delivery networks (CDNs), so the code doesn't have to be included in our project directly. There is one file, however, that we must create ourselves: app.js.