8000 ⚡️ Lesson-18:About DOM content Loaded Event · AsadUrRehmanCs111/JavaScript@4ad57b3 · GitHub
[go: up one dir, main page]
Skip to content

Commit 4ad57b3

Browse files
AsadUrRehmanCs111AsadUrRehmanCs111
committed
⚡️ Lesson-18:About DOM content Loaded Event
1 parent 6b4fb2e commit 4ad57b3

File tree

3 files changed

+253
-0
lines changed

3 files changed

+253
-0
lines changed

‎DOM Course/Lesson-18 DOM Content LoadedEvent/app.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
document.addEventListener('DOMContentLoaded',function(){
2+
3+
4+
//Delete Books
5+
const lists = document.querySelector('#book-list ul')
6+
7+
lists.addEventListener('click', function (e) {
8+
if (e.target.className == 'delete') {
9+
const li = e.target.parentNode
10+
lists.removeChild(li)
11+
}
12+
})
13+
14+
15+
//add book-lits
16+
17+
const addBooks = document.forms['add-book'];
18+
19+
addBooks.addEventListener('submit', function (e) {
20+
e.preventDefault();
21+
const value = addBooks.querySelector('input[type="text"]').value
22+
console.log(value)
23+
24+
//Add ELements
25+
const li = document.createElement('li')
26+
const bookName = document.createElement('span')
27+
const deleteBtn = document.createElement('span')
28+
29+
//add content
30+
31+
bookName.textContent = value
32+
deleteBtn.textContent = 'delete'
33+
34+
//Styles and CLasses by classList
35+
36+
bookName.classList.add('book')
37+
deleteBtn.classList.add('delete')
38+
39+
//Append these Elements to document
40+
li.appendChild(bookName);
41+
li.appendChild(deleteBtn);
42+
lists.appendChild(li)
43+
44+
})
45+
46+
//Hide Books
47+
48+
const hideBox = document.querySelector('#hide')
49+
hideBox.addEventListener('change', function (e) {
50+
if (hideBox.checked) {
51+
lists.style.display = 'none'
52+
}
53+
else {
54+
lists.style.display = 'initial'
55+
}
56+
})
57+
58+
//Filter Books
59+
60+
const searchBook = document.forms['search-books'].querySelector('input')
61+
searchBook.addEventListener('keyup', function (e) {
62+
const search = e.target.value.toLowerCase()
63+
const books = lists.getElementsByTagName('li')
64+
Array.from(books).forEach(book => {
65+
const title = book.firstElementChild.textContent
66+
if (title.toLocaleLowerCase().indexOf(search) != -1) {
67+
book.style.display = 'block'
68+
} else {
69+
book.style.display = 'none'
70+
}
71+
})
72+
})
73+
})

‎DOM Course/Lesson-18 DOM Content LoadedEvent/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>DOM Introduction</title>
8+
</head>
9+
<body>
10+
<div id="wrapper">
11+
<header>
12+
<div id="page-banner">
13+
<h1 class="title">Books</h1>
14+
<form id="search-books">
15+
<input type="text" placeholder="Search books..." />
16+
</form>
17+
</div>
18+
</header>
19+
<div id="book-list">
20+
<h2 class="title">Books for Reading</h2>
21+
<ul>
22+
<li>
23+
<span class="name">Book Alpha</span>
24+
<span class="delete">delete</span>
25+
</li>
26+
<li>
27+
<span class="name">Book Beta</span>
28+
<span class="delete">delete</span>
29+
</li>
30+
<li>
31+
<span class="name">Book Gema</span>
32+
<span class="delete">delete</span>
33+
</li>
34+
<li>
35+
<span class="name">No Book 4</span>
36+
<span class="delete">delete</span>
37+
</li>
38+
</ul>
39+
</div>
40+
<form id="add-book">
41+
<input type="checkbox" name="hideBooks" id="hide">
42+
<label for="hide">Hide All the Books</label>
43+
<input type="text" placeholder="Add a book..." />
44+
<button>Add</button>
45+
</form>
46+
</div>
47+
<script src="app.js"></script>
48+
</body>
49+
</html>

‎DOM Course/Lesson-18 DOM Content LoadedEvent/style.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
body {
2+
font-family: Tahoma;
3+
color: #444;
4+
letter-spacing: 1px;
5+
}
6+
7+
h1,
8+
h2 {
9+
font-weight: normal;
10+
}
11+
12+
#wrapper {
13+
width: 90%;
14+
max-width: 960px;
15+
margin: 20px auto;
16+
border-radius: 6px;
17+
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
18+
box-sizing: border-box;
19+
padding: 0 0 20px;
20+
overflow: hidden;
21+
border: 1px solid lightgray;
22+
}
23+
24+
#page-banner {
25+
background: #eee;
26+
padding: 10px 0;
27+
}
28+
29+
#page-banner h1,
30+
#page-banner p {
31+
width: 100%;
32+
text-align: center;
33+
margin: 10px 0;
34+
}
35+
36+
#page-banner input {
37+
width: 90%;
38+
max-width: 300px;
39+
margin: 20px auto;
40+
display: block;
41+
padding: 8px;
42+
border: 1px solid #ddd;
43+
border-radius: 4px;
44+
font-size: 16px;
45+
color: #444;
46+
}
47+
48+
#book-list,
49+
#add-book,
50+
#tabbed-content {
51+
margin: 30px;
52+
}
53+
54+
#book-list ul,
55+
#tabbed-content ul {
56+
list-style-type: none;
57+
padding: 0;
58+
}
59+
60+
#book-list li {
61+
padding: 20px;
62+
border-left: 5px solid #ddd;
63+
margin: 20px 10px;
64+
}
65+
66+
#book-list li:hover {
67+
border-color: #9361bf;
68+
}
69+
70+
.delete {
71+
float: right;
72+
background: #9361bf;
73+
padding: 6px;
74+
border-radius: 4px;
75+
cursor: pointer;
76+
color: white;
77+
}
78+
79+
.delete:hover {
80+
background: #333;
81+
}
82+
83+
#add-book {
84+
width: 400px;
85+
margin: 0 auto;
86+
}
87+
88+
#add-book input {
89+
display: block;
90+
margin: 20px 0;
91+
padding: 10px;
92+
border: 1px solid #ccc;
93+
font-size: 16px;
94+
border-radius: 4px 0 0 4px;
95+
box-sizing: border-box;
96+
width: 300px;
97+
float: left;
98+
clear: both;
99+
}
100+
101+
#add-book button {
102+
border: 1px solid #9361bf;
103+
background: #9361bf;
104+
padding: 10px 20px;
105+
font-size: 16px;
106+
display: inline-block;
107+
margin: 0;
108+
border-radius: 0 4px 4px 0;
109+
cursor: pointer;
110+
width: 100px;
111+
float: left;
112+
margin: 20px 0;
113+
border-left: 0;
114+
color: white;
115+
}
116+
117+
#add-book:after {
118+
content: "";
119+
display: block;
120+
clear: both;
121+
}
122+
123+
#add-book #hide {
124+
width: 30px;
125+
}
126+
127+
#add-book label {
128+
line-height: 52px;
129+
}
130+
131+

0 commit comments

Comments
 (0)
0