Ndawi Tabs-Components

components/Dropdown/Dropdown.js

@@ -1,28 +1,28 @@
 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;
-
-    // Add a click handler to the button reference and call the toggleContent method.
-    this.button.addEventListener('click', () => {
+    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");
   }
 }
 
 
 // Nothing to do here, just study what the code is doing and move on to the Dropdown class
-let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown));
+let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown));

components/Tabs/Tabs.js

@@ -3,53 +3,58 @@ 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();
-
+    links.forEach(link => link.classList.remove('tabs-item-selected'));
     // Add a class named "tabs-link-selected" to this link
     // this.element;
-
+    this.element.classList.add('tabs-item-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
-
+    items.forEach(item => item.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: 
+/* START HERE:
 
 - Select all classes named ".tabs-link" and assign that value to the links variable
 
@@ -59,4 +64,9 @@ class TabItem {
 
 */
 
-links = document.querySelectorAll();
+links = document.querySelectorAll(".tabs-links");
+links.forEach(link => new TabLink(link));
+
+// links.forEach(function(links){
+//   return new TabLink(links)
+// });