Skip to content

Commit 55df549

Browse files
codewizard13codewizard13
committed
CH 32: ADD Starting project files
1 parent ac6c7cf commit 55df549

File tree

2 files changed

+112
-0
lines changed

2 files changed

+112
-0
lines changed

‎ch_32/app.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// EVENT BUBBLING
2+
3+
// document.querySelector('.card-title').addEventListener('click', function(){
4+
// console.log('card title');
5+
// });
6+
7+
// document.querySelector('.card-content').addEventListener('click', function(){
8+
// console.log('card content');
9+
// });
10+
11+
// document.querySelector('.card').addEventListener('click', function(){
12+
// console.log('card');
13+
// });
14+
15+
// document.querySelector('.col').addEventListener('click', function(){
16+
// console.log('col');
17+
// });
18+
19+
// EVENT DELGATION
20+
21+
// const delItem = document.querySelector('.delete-item');
22+
23+
// delItem.addEventListener('click', deleteItem);
24+
25+
document.body.addEventListener('click', deleteItem);
26+
27+
function deleteItem(e){
28+
// if(e.target.parentElement.className === 'delete-item secondary-content'){
29+
// console.log('delete item');
30+
// }
31+
32+
if(e.target.parentElement.classList.contains('delete-item')){
33+
console.log('delete item');
34+
e.target.parentElement.parentElement.remove();
35+
}
36+
}

‎ch_32/index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
9+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
10+
crossorigin="anonymous">
11+
<title>Task List</title>
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
<div class="row">
17+
<div class="col s12">
18+
<div id="main" class="card">
19+
<div class="card-content">
20+
<span class="card-title">Task List</span>
21+
<div class="row">
22+
<form id="task-form" action="index.php">
23+
<div class="input-field col s12">
24+
<input type="text" name="task" id="task" value="Walk the dog">
25+
<label for="task">New Task</label>
26+
</div>
27+
</div>
28+
<input type="submit" value="Add Task" class="btn">
29+
</form>
30+
</div>
31+
<div class="card-action">
32+
<h5 id="task-title">Tasks</h5>
33+
<ul class="collection">
34+
<li class="collection-item">
35+
List Item
36+
<a href="#" class="delete-item secondary-content">
37+
<i class="fa fa-remove"></i>
38+
</a>
39+
</li>
40+
<li class="collection-item">
41+
List Item
42+
<a href="#" class="delete-item secondary-content">
43+
<i class="fa fa-remove"></i>
44+
</a>
45+
</li>
46+
<li class="collection-item">
47+
List Item
48+
<a href="#" class="delete-item secondary-content">
49+
<i class="fa fa-remove"></i>
50+
</a>
51+
</li>
52+
<li class="collection-item">
53+
List Item
54+
<a href="#" class="delete-item secondary-content">
55+
<i class="fa fa-remove"></i>
56+
</a>
57+
</li>
58+
<li class="collection-item">
59+
List Item
60+
<a href="#" class="delete-item secondary-content">
61+
<i class="fa fa-remove"></i>
62+
</a>
63+
</li>
64+
</ul>
65+
<a class="clear-tasks btn black" href="#">Clear Tasks</a>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
72+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
73+
<script src="app.js"></script>
74+
</body>
75+
76+
</html>

0 commit comments

Comments
 (0)