Open the index.html file and replace the default content with the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MediaMan</title>
<link rel="stylesheet" type="text/css" href="mediaman.css">
</head>
<body id="mediaMan">
<h1>MediaMan</h1>
<h2>Book collections</h2>
<div class="collectionContainerGroup">
<div class="containerGroup">
<div class="container">
<h3>New collection</h3>
<form id="newBookCollection" action="#">
<input id="newBookCollectionName" type="text"
title="Name" placeholder="Name" required>
<input type="button" value="Create"
onclick="mediaManController.
createBookCollection();" />
</form>
</div>
<div class="container">
<h3>Tools</h3>
<form action="#">
<input type="button" value="Reload collections"
onclick="mediaManController.
reloadBookCollections();" />
</form>
</div>
</div>
<div id="bookCollections" class="containerGroup">
</div>
</div>
<hr>
<h2>Movie collections</h2>
Bonus exercise!
<script src="./mediaman.ts"></script>
</body>
</html>
This will be our base structure for the page. In this chapter, we will not modify it any further. We will make all the necessary modifications programmatically in TypeScript.
Note that we can only refer to the mediaman.ts file in the index.html file because we are using the Parcel bundler in the base project!
The preceding identifiers do matter! As you'll see throughout the chapter, we will refer to these in our code, so make sure that you do not change them for now. The CSS class names also matter as the default style sheet won't work if you change these class names.
The following is how the page should initially look:
Still not too fancy, but be patient; later in the book, we will use much better-looking widgets.