margaretbecker

components/Dropdown/Dropdown.js

@@ -2,25 +2,26 @@ 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');
+}
 }
 
 

components/Tabs/Tabs.js

@@ -2,50 +2,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(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');
   }
 }
 
@@ -59,4 +64,4 @@ class TabItem {
 
 */
 
-links = document.querySelectorAll();
+links = document.querySelectorAll('.tabs-link').forEach( link => new TabLink(link));

index.html

@@ -72,6 +72,18 @@
 								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">
+								Do not let what you cannot do interfere with what you can do.
+							</div>
+						</div>
+						<div class="tabs-item" data-tab="6">
+							<div class="tabs-item-title">Quote 6</div>
+							<div class="tabs-item-description">
+								Things turn out best for the people who make the best of the way things turn out.
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>