We need an HTML file to act as the entry point to the application. Create a file in the /src directory named index.html and populate it with the following contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Workers</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form class="valueForm">
<div class="valueForm">
<label for="firstVal">First Value:</label>
<input id="firstVal" type="number" value="0" />
</div>
<div class="valueForm">
<label for="secondVal">Second Value:</label>
<input id="secondVal" type="number" value="0" />
</div>
<div class="valueForm">
<label for="result">Result:</label>
<input id="result" type="number" value="0" readonly />
</div>
</form>
<div>
<button id="add">Add</button>
<button id="subtract">Subtract</button>
<button id="reset">Reset</button>
</div>
<script type="module" src="index.js"></script>
</body>
</html>
The application consists of a <form> with three <input> elements and a block of three <button> elements. The first two <input> elements correspond to the firstVal and secondVal properties included in the payload sent to either worker thread. The final <input> is read-only and displays the result of either operation.
The block of <button> elements below the <form> perform operations on the <input> values. The first two <button> elements send the <input> values to either the addWorker or subtractWorker thread (depending on which button was pressed). The final <button> sets all of the <input> values to 0.
The application is initialized in the <script> tag in the last line before the </body> closing tag. Just as with Cook the Books, the type="module" attribute allows us to use the import/export syntax available in newer browsers. Finally, we need to add some styles to the application. Create a file in the /src directory named styles.css and populate it with the following contents:
* {
font-family: sans-serif;
font-size: 14px;
}
body {
margin: 16px;
}
form.valueForm {
display: table;
}
div.valueForm {
display: table-row;
}
label, input {
display: table-cell;
margin-bottom: 16px;
}
label {
font-weight: bold;
padding-right: 16px;
}
button {
border: 1px solid black;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
height: 24px;
margin-right: 4px;
width: 80px;
}
button:hover {
background: lightgray;
}
That's the last file we need to create, but not the last one required to run the application. We still need to generate Wasm files from the C files in the /lib directory. Let's move on to the build step.