-
Notifications
You must be signed in to change notification settings - Fork 0
/
Chapter 14.js
143 lines (120 loc) · 4.54 KB
/
Chapter 14.js
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
//Q-1: Given a data set of mountains, an array of objects with name, height, and place properties, generate the DOM structure for a table that enumerates the objects.
// It should have one column per key and one row per object, plus a header row with <th> elements at the top, listing the column names. Write this so that the columns are automatically derived from the objects,
//by taking the property names of the first object in the data. Add the resulting table to the element with an id attribute of "mountains" so that it becomes visible in the document.
//Once you have this working, right-align cells that contain number values by setting their style.textAlign property to "right".
//Solution
<h1>Mountains</h1>
<div id="mountains"></div>
<script>
const MOUNTAINS = [
{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
{name: "Everest", height: 8848, place: "Nepal"},
{name: "Mount Fuji", height: 3776, place: "Japan"},
{name: "Vaalserberg", height: 323, place: "Netherlands"},
{name: "Denali", height: 6168, place: "United States"},
{name: "Popocatepetl", height: 5465, place: "Mexico"},
{name: "Mont Blanc", height: 4808, place: "Italy/France"}
];
// Your code here
const generateTable = (data) =>{
const table = document.createElement("table");
const headerRow = document.createElement("tr");
const columns = Object.keys(data[0]);
columns.forEach(columnName => {
const tableHeader = document.createElement("th");
tableHeader.textContent = columnName;
headerRow.appendChild(tableHeader);
});
table.appendChild(headerRow);
data.forEach(obj =>{
const newRow = document.createElement("tr");
const cellDetails = Object.values(obj);
cellDetails.forEach(cell =>{
const tableDetail = document.createElement("td");
tableDetail.textContent = cell;
if(typeof(cell) === "number"){
tableDetail.style.textAlign = "right";
}
newRow.appendChild(tableDetail);
})
table.appendChild(newRow);
})
return table;
}
const generatedTable = generateTable(MOUNTAINS);
const mountians = document.getElementById("mountains");
mountains.appendChild(generatedTable);
</script>
const mountainsElement = document.getElementById("mountains");
// Generate and append the table
mountainsElement.appendChild(generateTable(mountains));
/*Q-2: The document.getElementsByTagName method returns all child elements with a given tag name.
Implement your version of this as a function that takes a node and a string (the tag name) as arguments and returns
an array containing all descendant element nodes with the given tag name. Your function should go through the document itself.
It may not use a method like querySelectorAll to do the work.*/
//Solution
function byTagName(node, tagName) {
let elements = [];
function parseNodes(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.nodeName.toLowerCase() === tagName.toLowerCase()) {
elements.push(node);
}
for (let child of node.childNodes) {
parseNodes(child);
}
}
}
parseNodes(node);
return elements;
}
console.log(byTagName(document.body, "h1").length);
// → 1
console.log(byTagName(document.body, "span").length);
// → 3
let para = document.querySelector("p");
console.log(byTagName(para, "span").length);
// → 2
// Q3: Cat with a Hat animation
//Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Cat with Hat</title>
<style>
body {
min-height: 200px;
position: relative;
}
#cat {
position: absolute;
}
#hat {
position: absolute;
}
</style>
</head>
<body>
<img src="img/cat.png" id="cat" style="position: absolute">
<img src="img/hat.png" id="hat" style="position: absolute">
<script>
let cat = document.querySelector("#cat");
let hat = document.querySelector("#hat");
let angle = 0;
let lastTime = null;
function animate(time) {
if (lastTime != null) angle += (time - lastTime) * 0.001;
lastTime = time;
cat.style.top = (Math.sin(angle) * 40 + 40) + "px";
cat.style.left = (Math.cos(angle) * 200 + 230) + "px";
hat.style.top = (Math.sin(angle) * + 40) + "px";
hat.style.left = (Math.cos(angle) * 210 + 250) + "px";
// Your extensions here.
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</body>
</html>