From e9dff3dc09d8f607691d1dd3473aff67ae352120 Mon Sep 17 00:00:00 2001
From: RyanSWest <west56309@gmail.com>
Date: Thu, 18 Apr 2019 22:14:11 -0500
Subject: [PATCH] ryan-west 1st commit

---
 components/Dropdown/Dropdown.js | 21 ++++++++-------
 components/Tabs/Tabs.js         | 46 +++++++++++++++++++++------------
 2 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js
index c6cad4454..c5c88e7b7 100644
--- a/components/Dropdown/Dropdown.js
+++ b/components/Dropdown/Dropdown.js
@@ -2,24 +2,25 @@ class Dropdown {
   constructor(element) {
     
     // Assign this.element to the dropdown element
-    this.element;
+    this.element =document.querySelectorAll ('.dropdown');
     
     // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context)
-    this.button = this.element.querySelector();
-    
-    // assign the reference to the ".dropdown-content" class found in the dropdown element
-    this.content;
-    
+    this.button = document.querySelector('.dropdown-button');
+     // assign the reference to the ".dropdown-content" class found in the dropdown element
+    this.content = document.querySelector('.dropdown-content') 
+    this.content.classList =('.content-hidden')
+    console.log(this.content)
     // Add a click handler to the button reference and call the toggleContent method.
-    this.button.addEventListener('click', () => {
-
-    })
+    //  this.button.addEventListener('click', ( ) => this.toggleContent())
+      this.button.addEventListener('click', this.toggleContent.bind(this))
   }
+     
+  
 
   toggleContent() {
     
     // Toggle the ".dropdown-hidden" class off and on
-    this.content;
+    this.content.classList.toggle('dropdown-content');
   }
 }
 
diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js
index 4163d47aa..466b27cd2 100644
--- a/components/Tabs/Tabs.js
+++ b/components/Tabs/Tabs.js
@@ -3,50 +3,61 @@ class TabLink {
   constructor(element) {
     // Assign this.element to the passed in DOM element
     // this.element;
-    
+    // this.element = doucment.querySelector(`.tabs[data-tab = '${element.dataset.tab}']`)
     // Get the custom data attribute on the Link
     // this.data;
+    this.element = element;
+    this.data = this.element.dataset.tab;
+    console.log(this.data)
     
     // 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;
-    
-    // Add a click event listener on this instance, calling the select method on click
+    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.querySelector('.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(function(e){
+         e.classList.remove('.tabs-item-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;
-
-    // Remove the class "tabs-item-selected" from each element
-    
+      const items = document.querySelectorAll('.tabs-item');
+      // Remove the class "tabs-item-selected" from each element
+     Array.from(items).forEach((e) => {
+      e.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 +70,7 @@ class TabItem {
 
 */
 
-links = document.querySelectorAll();
\ No newline at end of file
+ const links = document.querySelectorAll('.tabs-link') 
+links.forEach(element => new TabLink(element));
+// links.style.backgroundColor= 'aqua';
+console.log(links)
\ No newline at end of file