Skip to content

Commit f610f14

Browse files
EdgarsBeEdgarsBe
committed
17 lesson
1 parent a163d65 commit f610f14

3 files changed

Lines changed: 75 additions & 47 deletions

File tree

‎app.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,20 @@ searchBar.addEventListener('keyup', function(e){
6060
book.style.display = 'none';
6161
};
6262
});
63+
});
64+
65+
// tabbed content
66+
const tabs = document.querySelector('.tabs');
67+
const panels = document.querySelectorAll('.panel');
68+
tabs.addEventListener('click', function(e){
69+
if(e.target.tagName == 'LI'){
70+
const targetPanel = document.querySelector(e.target.dataset.target);
71+
Array.from(panels).forEach(function(panel){
72+
if(panel == targetPanel){
73+
panel.classList.add('active');
74+
}else{
75+
panel.classList.remove('active');
76+
}
77+
});
78+
}
6379
});

‎index.html‎

Lines changed: 58 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,62 @@
11
<html>
2-
<head>
3-
<meta charset="utf-8">
4-
<link href="styles.css" rel="stylesheet">
5-
<title>JavaScript DOM Tutorials</title>
6-
</head>
7-
<body>
8-
<div id="wrapper">
9-
<header>
10-
<div id="page-banner">
11-
<h1 class="title">Bookorama</h1>
12-
<p>Books for Ninjas</p>
13-
<a href="http://www.thenetninja.co.uk">The Net Ninja</a>
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>
2+
<head>
3+
<meta charset="utf-8">
4+
<link href="styles.css" rel="stylesheet" />
5+
<title>JavaScript DOM Tutorials</title>
6+
</head>
7+
<body>
8+
<div id="wrapper">
9+
<header>
10+
<div id="page-banner">
11+
<h1 class="title">Bookorama</h1>
12+
<p>Books for Ninjas</p>
13+
<form id="search-books">
14+
<input type="text" placeholder="Search books..." />
15+
</form>
16+
</div>
17+
</header>
18+
<div id="book-list">
19+
<h2 class="title">Books to Read</h2>
20+
<ul>
21+
<li>
22+
<span class="name">Name of the Wind</span>
23+
<span class="delete">delete</span>
24+
</li>
25+
<li>
26+
<span class="name">The Wise Man's Fear</span>
27+
<span class="delete">delete</span>
28+
</li>
29+
<li>
30+
<span class="name">Kafka on the Shore</span>
31+
<span class="delete">delete</span>
32+
</li>
33+
<li>
34+
<span class="name">The Master and the Margarita</span>
35+
<span class="delete">delete</span>
36+
</li>
37+
</ul>
38+
</div>
39+
<form id="add-book">
40+
<input type="checkbox" id="hide" />
41+
<label for="hide">Hide all books</label>
42+
<input type="text" placeholder="Add a book..." />
43+
<button>Add</button>
44+
</form>
45+
<div id="tabbed-content">
46+
<ul class="tabs">
47+
<li data-target="#about" class="active">About</li>
48+
<li data-target="#contact">Contact</li>
49+
</ul>
50+
<div class="panel active" id="about">
51+
<p>Content for about tab...</p>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
4653
</div>
47-
</body>
54+
<div class="panel" id="contact">
55+
<p>Content for contact tab...</p>
56+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
57+
</div>
58+
</div>
59+
</div>
4860
<script src="app.js"></script>
61+
</body>
4962
</html>

‎styles.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ h1, h2{
122122
#add-book #label{
123123
line-height: 52px;
124124
}
125-
/*
125+
126126
#tabbed-content li{
127127
display: inline-block;
128128
padding: 10px 14px;
@@ -140,4 +140,3 @@ h1, h2{
140140
#tabbed-content .tab.active{
141141
display: block;
142142
}
143-
*/

0 commit comments

Comments
 (0)