-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path120. DynamicallyAddingItems.html
60 lines (52 loc) · 1.72 KB
/
120. DynamicallyAddingItems.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DynamicallyAddingItems</title>
</head>
<body>
<div>
<button onclick="addData()">Show More Items</button>
<div>
<ol id="list">
<li>HTML and Semantics</li>
</ol>
</div>
<p id="response"></p>
</div>
<script>
let arr = [
"Starting with CSS",
"Working Template",
"Mobile responsive webpages",
"Grid and Flex-box in CSS",
"Projects using HTML & CSS",
"Version Control and Git",
"Getting Started with JavaScript",
"Advance JavaScript",
"Working with DOM",
"Making Projects using HTML, CSS and JavaScript",
"Understanding Fundamental of Computer Science",
"Getting Started with Database",
"Understanding the Database",
"Starting with NodeJS and Express",
"Understanding React and its Fundamentals",
"Understanding Hooks and Routers",
"Starting and Completing Full Fledge Projects"
];
let i = 0;
let addData = () => {
if ( i < 17) {
let list = document.querySelector("#list");
const newElement = document.createElement("li");
newElement.innerHTML = arr[i];
list.appendChild(newElement);
i++;
}
else document.querySelector("#response").innerHTML = "All items have been added";
};
</script>
</body>
</html>