-
Notifications
You must be signed in to change notification settings - Fork 0
/
new-elements-homework-starter.html
113 lines (103 loc) · 2.46 KB
/
new-elements-homework-starter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 5.2 New Elements - finished</title>
<style>
html {
font-family: Arial, Helvetica, sans-serif;
}
table {
margin-top:2em;
border: 1px solid #000;
padding: .25em;
}
meter {
display: block;
}
</style>
</head>
<body>
<h1>Shopping Cart</h1>
<h2>Countdown to purchase:</h2>
<!--add meter here-->
<meter max=10 min=0 optimum=10 value=7></meter>
<!--add figure here-->
<figure>
<img src="images/tshirt.png" alt="t-shirt">
<figcaption>T-shirt size: small, color: blue</figcaption>
</figure>
<!--add details here-->
<details>
<summary> Credit Cards</summary>
<p>We accept the following:</p>
<ul>
<li>Visa</li>
<li>MasterCard</li>
<li>Diners Club</li>
<li>Discover</li>
<li>American Express</li>
<li>PayPal</li>
</ul>
</details>
<h2>Products</h2>
<table>
<thead>
<tr>
<th>Item</th>
<th>Color</th>
<th>Size</th>
<th>Quantity</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tr>
<td>Shirt</td>
<td><mark>blue</mark></td>
<td><mark>small</mark></td>
<td>1</td>
<td><del>12.99</del> 9.99</td>
<td><button id="add">Add</button></td>
</tr>
</table>
<table>
<thead>
<tr>
<th>Item</th>
<th>Color</th>
<th>Size</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id='this-one'>
</tbody>
</table>
<!--add template here with id="tr"-->
<template id="tr">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</template>
<script>
const addBtn = document.getElementById('add');
addBtn.addEventListener('click', function() {
let tr = document.querySelector('#tr');
td = tr.content.querySelectorAll("td");
td[0].textContent = "Shirt";
td[1].textContent = "blue";
td[2].textContent = "small";
td[3].textContent = "1";
td[4].textContent = "9.99";
const cloneRow = document.importNode(tr.content, true);
const tb = document.querySelector('tbody#this-one');
tb.appendChild(cloneRow);
});
</script>
</body>
</html>