-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSpindler_ES6_Maps.html
68 lines (59 loc) · 1.83 KB
/
Spindler_ES6_Maps.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
<!DOCTYPE html>
<html>
<head>
<title>Lab #10</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Map Exercise</title>
</head>
<body>
<h1>Camp Whack-a-Doo Task's</h1>
<script>
const campers = new Map();
const camperNameInput = document.createElement('input');
const showButton = document.createElement('button');
camperNameInput.placeholder = 'Camper name';
document.body.appendChild(camperNameInput);
camperNameInput.insertAdjacentHTML('afterend', '<br/>');
const taskSelect = document.createElement('select');
const taskOptions = [
'Front Room Sweep',
'Back Room Sweep',
'Outside Grounds Clean',
'Toilet Clean',
'Sink Clean',
'Trash Patrol and Supplies',
];
for (const taskOption of taskOptions) {
const option = document.createElement('option');
option.textContent = taskOption;
taskSelect.appendChild(option);
}
document.body.appendChild(taskSelect);
taskSelect.insertAdjacentHTML('afterend', '<br/>');
const addButton = document.createElement('button');
addButton.textContent = 'Add camper and task';
document.body.appendChild(addButton);
addButton.addEventListener('click', () => {
const camperName = camperNameInput.value;
const task = taskSelect.value;
if (camperName && task) {
campers.set(task, camperName);
camperNameInput.value = '';
}
});
showButton.textContent = 'Show campers and tasks';
document.body.appendChild(showButton);
showButton.addEventListener('click', () => {
for (const [task, camperName] of campers.entries()) {
const p = document.createElement('p');
p.textContent = `${camperName}: ${task}`;
document.body.appendChild(p);
}
});
</script>
</body>
</html>