lesson 17 code

iamshaunjp · iamshaunjp · commit e922591c94dd · 2017-08-11T10:14:11.000+01:00
diff --git a/app.js b/app.js
@@ -58,3 +58,19 @@ searchBar.addEventListener('keyup', (e) => {
     }
   });
 });
+
+// tabbed content
+const tabs = document.querySelector('.tabs');
+const panels = document.querySelectorAll('.panel');
+tabs.addEventListener('click', (e) => {
+  if(e.target.tagName == 'LI'){
+    const targetPanel = document.querySelector(e.target.dataset.target);
+    Array.from(panels).forEach((panel) => {
+      if(panel == targetPanel){
+        panel.classList.add('active');
+      }else{
+        panel.classList.remove('active');
+      }
+    });
+  }
+});
diff --git a/index.html b/index.html
@@ -43,6 +43,20 @@ <h2 class="title">Books to Read</h2>
 	    	<input type="text" placeholder="Add a book..." />
 	    	<button>Add</button>
 	    </form>
+      <div id="tabbed-content">
+        <ul class="tabs">
+          <li data-target="#about" class="active">About</li>
+          <li data-target="#contact">Contact</li>
+        </ul>
+        <div class="panel active" id="about">
+          <p>Content for about tab...</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
+        </div>
+        <div class="panel" id="contact">
+          <p>Content for contact tab...</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
+        </div>
+      </div>
     </div>
     <script src="app.js"></script>
   </body>
diff --git a/styles.css b/styles.css
@@ -124,7 +124,6 @@ h1, h2{
   line-height: 52px;
 }
 
-/*
 #tabbed-content li{
     display: inline-block;
     padding: 10px 14px;
@@ -134,14 +133,13 @@ h1, h2{
     margin-right: 10px;
 }
 
-#tabbed-content .tab{
+#tabbed-content .panel{
     display: none;
     border: 1px solid #ddd;
     padding: 0 10px;
     border-radius: 4px;
 }
 
-#tabbed-content .tab.active{
+#tabbed-content .panel.active{
     display: block;
 }
-*/

Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,6 @@ h1, h2{`
`124`	`124`	`line-height: 52px;`
`125`	`125`	`}`
`126`	`126`
`127`		`-/*`
`128`	`127`	`#tabbed-content li{`
`129`	`128`	`display: inline-block;`
`130`	`129`	`padding: 10px 14px;`
`@@ -134,14 +133,13 @@ h1, h2{`
`134`	`133`	`margin-right: 10px;`
`135`	`134`	`}`
`136`	`135`
`137`		`-#tabbed-content .tab{`
	`136`	`+#tabbed-content .panel{`
`138`	`137`	`display: none;`
`139`	`138`	`border: 1px solid #ddd;`
`140`	`139`	`padding: 0 10px;`
`141`	`140`	`border-radius: 4px;`
`142`	`141`	`}`
`143`	`142`
`144`		`-#tabbed-content .tab.active{`
	`143`	`+#tabbed-content .panel.active{`
`145`	`144`	`display: block;`
`146`	`145`	`}`
`147`		`-*/`