Skip to content

Commit eb1b59c

Browse files
rclarkemrclarkem
committed
my follow along to checkboxes in addition to adding a completed strikethrough feature.
1 parent 9a8131c commit eb1b59c

File tree

2 files changed

+123
-83
lines changed

2 files changed

+123
-83
lines changed

‎app.js‎

Lines changed: 69 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,77 @@
1-
const list = document.querySelector('#book-list ul');
2-
const forms = document.forms;
1+
const bookList = document.querySelector('#book-list ul');
2+
console.log(bookList);
3+
const bookForm = document.forms['add-book'];
4+
const hideBooks = document.querySelector('#hide');
5+
const bookRead = document.querySelectorAll('.book-complete');
36

4-
// delete books
5-
list.addEventListener('click', (e) => {
6-
if(e.target.className == 'delete'){
7-
const li = e.target.parentElement;
8-
li.parentNode.removeChild(li);
9-
}
7+
//delete Function
8+
bookList.addEventListener('click', function (e) {
9+
if (e.target.matches('.delete')) {
10+
deleteBooks(e.target);
11+
} else if (e.target.matches('.book-complete')) {
12+
completeRead(e.target);
13+
}
1014
});
1115

12-
// add books
13-
const addForm = forms['add-book'];
14-
addForm.addEventListener('submit', function(e){
15-
e.preventDefault();
16-
17-
// create elements
18-
const value = addForm.querySelector('input[type="text"]').value;
19-
const li = document.createElement('li');
20-
const bookName = document.createElement('span');
21-
const deleteBtn = document.createElement('span');
16+
//hide All books
17+
hideBooks.addEventListener('change', (ev) => {
18+
if (hideBooks.checked) {
19+
bookList.style.display = 'none';
20+
} else {
21+
bookList.style.display = 'initial';
22+
}
23+
});
2224

23-
// add text content
24-
bookName.textContent = value;
25-
deleteBtn.textContent = 'delete';
25+
//delete books
26+
function deleteBooks(ev) {
27+
const li = ev.parentElement;
28+
bookList.removeChild(li);
29+
}
2630

27-
// add classes
28-
bookName.classList.add('name');
29-
deleteBtn.classList.add('delete');
31+
//complete read books
32+
function completeRead(ev) {
33+
ev.addEventListener('change', () => {
34+
let title = ev.parentElement.querySelector('.name');
35+
if (ev.checked) {
36+
title.style.textDecoration = 'line-through';
37+
} else {
38+
title.style.textDecoration = 'initial';
39+
}
40+
});
41+
}
3042

31-
// append to DOM
32-
li.appendChild(bookName);
33-
li.appendChild(deleteBtn);
34-
list.appendChild(li);
43+
// add Book Function
44+
bookForm.addEventListener('submit', (e) => {
45+
e.preventDefault();
46+
let text = e.target.title.value;
47+
let newLI = createAndAppendElement('li', bookList, null, null, undefined);
48+
createAndAppendElement('input', newLI, null, 'book-complete', (e) => {
49+
e.setAttribute('type', 'checkbox');
50+
});
51+
createAndAppendElement('label', newLI, null, null, (e) => {
52+
e.htmlFor = checkBox.className;
53+
});
54+
createAndAppendElement('span', newLI, null, 'name', (e) => {
55+
e.textContent = text;
56+
});
57+
createAndAppendElement('span', newLI, null, 'delete', (e) => {
58+
e.textContent = 'delete';
59+
});
60+
e.target.title.value = '';
3561
});
3662

37-
// hide books
38-
const hideBox = document.querySelector('#hide');
39-
hideBox.addEventListener('change', function(e){
40-
if(hideBox.checked){
41-
list.style.display = "none";
42-
} else {
43-
list.style.display = "initial";
44-
}
45-
});
63+
//helper append function
64+
function createAndAppendElement(tag, parent, id, className, callback) {
65+
const element = document.createElement(tag);
66+
parent.append(element);
67+
if (id !== null) {
68+
element.id = id;
69+
}
70+
if (className !== null) {
71+
element.className = className;
72+
}
73+
if (callback !== undefined) {
74+
callback(element);
75+
}
76+
return element;
77+
}

‎index.html‎

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,57 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<link href="styles.css" rel="stylesheet" />
6-
<title>JavaScript DOM Tutorials</title>
7-
</head>
8-
<body>
9-
<div id="wrapper">
10-
<header>
11-
<div id="page-banner">
12-
<h1 class="title">Bookorama</h1>
13-
<p>Books for Ninjas</p>
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 to Read</h2>
21-
<ul>
22-
<li>
23-
<span class="name">Name of the Wind</span>
24-
<span class="delete">delete</span>
25-
</li>
26-
<li>
27-
<span class="name">The Wise Man's Fear</span>
28-
<span class="delete">delete</span>
29-
</li>
30-
<li>
31-
<span class="name">Kafka on the Shore</span>
32-
<span class="delete">delete</span>
33-
</li>
34-
<li>
35-
<span class="name">The Master and the Margarita</span>
36-
<span class="delete">delete</span>
37-
</li>
38-
</ul>
39-
</div>
40-
<form id="add-book">
41-
<input type="checkbox" id="hide" />
42-
<label for="hide">Hide all 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>
3+
<head>
4+
<meta charset="utf-8" />
5+
<link href="styles.css" rel="stylesheet" />
6+
<title>JavaScript DOM Tutorials</title>
7+
</head>
8+
<body>
9+
<div id="wrapper">
10+
<header>
11+
<div id="page-banner">
12+
<h1 class="title">Bookorama</h1>
13+
<p>Books for Ninjas</p>
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 to Read</h2>
21+
<ul>
22+
<li>
23+
<input type="checkbox" class="book-complete" />
24+
<label for="book-complete"></label>
25+
<span class="name">Name of the Wind</span>
26+
<span class="delete">delete</span>
27+
</li>
28+
<li>
29+
<input type="checkbox" class="book-complete" />
30+
<label for="book-complete"></label>
31+
<span class="name">The Wise Man's Fear</span>
32+
<span class="delete">delete</span>
33+
</li>
34+
<li>
35+
<input type="checkbox" class="book-complete" />
36+
<label for="book-complete"></label>
37+
<span class="name">Kafka on the Shore</span>
38+
<span class="delete">delete</span>
39+
</li>
40+
<li>
41+
<input type="checkbox" class="book-complete" />
42+
<label for="book-complete"></label>
43+
<span class="name">The Master and the Margarita</span>
44+
<span class="delete">delete</span>
45+
</li>
46+
</ul>
47+
</div>
48+
<form id="add-book">
49+
<input type="checkbox" id="hide" />
50+
<label for="hide">Hide all books</label>
51+
<input type="text" name="title" placeholder="Add a book..." />
52+
<button>Add</button>
53+
</form>
54+
</div>
55+
<script src="app.js"></script>
56+
</body>
4957
</html>

0 commit comments

Comments
 (0)