Tara sherman

components/Dropdown/Dropdown.js

@@ -2,24 +2,24 @@ class Dropdown {
   constructor(element) {
 
     // Assign this.element to the dropdown element
-    this.element;
+    this.element = element;
 
     // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context)
-    this.button = this.element.querySelector();
+    this.button = this.element.querySelector('.dropdown-button');
 
     // assign the reference to the ".dropdown-content" class found in the dropdown element
-    this.content;
+    this.content = this.element.querySelector('.dropdown-content');
 
     // Add a click handler to the button reference and call the toggleContent method.
     this.button.addEventListener('click', () => {
-
+      this.toggleContent();
     })
   }
 
   toggleContent() {
 
     // Toggle the ".dropdown-hidden" class off and on
-    this.content;
+    this.content.classList.toggle('dropdown-hidden');;
   }
 }
 

components/Tabs/Tabs.js

@@ -1,53 +1,55 @@
-
 class TabLink {
   constructor(element) {
     // Assign this.element to the passed in DOM element
-    // this.element;
+    this.element = element;
 
     // Get the custom data attribute on the Link
-    // this.data;
+    this.data = this.element.dataset.tab;
 
     // Using the custom data attribute get the associated Item element
-    // this.itemElement;
+    this.itemElement = document.querySelector(`.tabs-item[data-tab = '${this.data}']`);
 
     // Using the Item element, create a new instance of the TabItem class
-    // this.tabItem;
+    this.tabItem = new TabItem(this.itemElement);
 
     // Add a click event listener on this instance, calling the select method on click
-
+    this.element.addEventListener('click', () => {this.select();
+    });
   };
 
   select() {
     // Get all of the elements with the tabs-link class
-    // const links;
+    const links = document.querySelectorAll('.tabs-link');
 
     // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links
-    // Array.from(links).forEach();
+    Array.from(links).forEach(link => link.classList.remove('tabs-link-selected'));
 
     // Add a class named "tabs-link-selected" to this link
-    // this.element;
+    this.element.classList.add('tabs-link-selected');
 
     // Call the select method on the item associated with this link
-
-  }
-}
+    this.tabItem.select();
+  };
+};
 
 class TabItem {
   constructor(element) {
     // Assign this.element to the passed in element
-    // this.element;
-  }
+    this.element = element;
+  };
 
   select() {
     // Select all ".tabs-item" elements from the DOM
-    // const items;
+    const items = document.querySelectorAll('.tabs-item');
 
     // Remove the class "tabs-item-selected" from each element
+    Array.from(items).forEach(link => link.classList.remove('tabs-item-selected'));
 
     // Add a class named "tabs-item-selected" to this element
-    //this.element;
-  }
-}
+    this.element.classList.add('tabs-item-selected');
+  };
+};
+
 
 /* START HERE: 
 
@@ -59,4 +61,4 @@ class TabItem {
 
 */
 
-links = document.querySelectorAll();
+const links = document.querySelectorAll('.tabs-link').forEach(link => new TabLink(link));

index.html

@@ -38,6 +38,7 @@
 						<div class="tabs-link" data-tab="2">Tab 2</div>
 						<div class="tabs-link" data-tab="3">Tab 3</div>
 						<div class="tabs-link" data-tab="4">Tab 4</div>
+						<div class="tabs-link" data-tab="5">Tab 5</div>
 					</div>
 					<div class="tabs-items">
 						<div class="tabs-item tabs-item-selected" data-tab="1">
@@ -72,6 +73,12 @@
 								that this has already happened.
 							</div>
 						</div>
+						<div class="tabs-item" data-tab="5">
+							<div class="tabs-item-title">Quote 5</div>
+							<div class="tabs-item-description">
+								“…it has great practical value – you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can’t see it, it can’t see you – daft as a bush, but very, very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough.”
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>