AECC database project.
1<div id="allProducts" hidden>
2 <h1>Here is the list of products:</h1>
3 <label for="productFinderFilter">Filter the results:</label>
4 <search>
5 <input type="search" name="productFinderFilter" onkeyup="tableFilter(event, allProductsTable);" placeholder="filter...">
6 </search>
7 <table id="allProductsTable">
8 <thead>
9 <tr>
10 <th>ID</th>
11 <th style="width:30ch;">Cost (cents)</th>
12 <th style="width:80ch;">Description</th>
13 <th style="border:0px;"></th>
14 <th style="border:0px;"></th>
15 <tr>
16 </thead>
17 <tbody></tbody>
18 </table>
19 <button onclick="next('productCreator');">Create a new activity</button>
20</div>
21
22<div id="productCreator" hidden>
23 So you want to create a product...
24 <br />
25 <form onsubmit="createProduct(event);">
26 <fieldset>
27 <legend>Product:</legend>
28 <label for="cents">Cost:</label>
29 <div class="input-box">
30 <span> $</span>
31 <input type="number" name="cents" min="0.01" step="0.01" max="2500" />
32 </div>
33 <br />
34 <label for="description">Description:</label>
35 <br />
36 <input type="text" minlength="1" name="description" maxlength="80" />
37 <br />
38 <br />
39 <input type="submit" value="Submit" />
40 </fieldset>
41 </form>
42</div>
43
44<div id="productEditor" hidden>
45 <form onsubmit="editProductHandler(event);">
46 <fieldset>
47 <legend>Edit product:</legend>
48 <label for="cents">Cost:</label>
49 <div class="input-box">
50 <span> $</span>
51 <input type="number" id="productEditorDollars" name="cents" min="0.01" step="0.01" max="2500" />
52 </div>
53 <br />
54 <label for="description">Description:</label>
55 <input type="text" id="productEditorDescription" minlength="1" name="description" maxlength="80" />
56 <br />
57 <br />
58 <input type="submit" value="Submit" />
59 <input type="hidden" id="productEditorID" />
60 </fieldset>
61 </form>
62</div>