Yasir hassan

components/Dropdown/Dropdown.js

@@ -1,28 +1,42 @@
+// class Dropdown {
+//   constructor(element) {
+
+//     // Assign this.element to the dropdown element
+//     this.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();
+
+//     // 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', () => {
+
+//     })
+//   }
+
+//   toggleContent() {
+
+//     // Toggle the ".dropdown-hidden" class off and on
+//     this.content;
+//   }
+// }
+
 class Dropdown {
   constructor(element) {
-
-    // Assign this.element to the dropdown element
-    this.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();
-
-    // 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.element = element;
+    this.button = this.element.querySelector(".dropdown-button");
+    this.content = this.element.querySelector(".dropdown-content");
+    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

@@ -1,62 +1,88 @@
+// class TabLink {
+//   constructor(element) {
+//     // Assign this.element to the passed in DOM element
+//     // this.element;
 
-class TabLink {
-  constructor(element) {
-    // Assign this.element to the passed in DOM element
-    // this.element;
-
-    // Get the custom data attribute on the Link
-    // this.data;
-
-    // Using the custom data attribute get the associated Item element
-    // this.itemElement;
-
-    // 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
-
-  };
+//     // Get the custom data attribute on the Link
+//     // this.data;
 
-  select() {
-    // Get all of the elements with the tabs-link class
-    // const links;
+//     // Using the custom data attribute get the associated Item element
+//     // this.itemElement;
 
-    // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links
-    // Array.from(links).forEach();
+//     // Using the Item element, create a new instance of the TabItem class
+//     // this.tabItem;
 
-    // Add a class named "tabs-link-selected" to this link
-    // this.element;
-
-    // Call the select method on the item associated with this link
+//     // Add a click event listener on this instance, calling the select method on click
 
-  }
-}
+//   };
 
-class TabItem {
-  constructor(element) {
-    // Assign this.element to the passed in element
-    // this.element;
-  }
+//   select() {
+//     // Get all of the elements with the tabs-link class
+//     // const links;
 
-  select() {
-    // Select all ".tabs-item" elements from the DOM
-    // const items;
+//     // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links
+//     // Array.from(links).forEach();
 
-    // Remove the class "tabs-item-selected" from each element
-
-    // Add a class named "tabs-item-selected" to this element
-    //this.element;
-  }
-}
+//     // Add a class named "tabs-link-selected" to this link
+//     // this.element;
 
-/* START HERE: 
+//     // Call the select method on the item associated with this link
 
-- Select all classes named ".tabs-link" and assign that value to the links variable
+//   }
+// }
 
-- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList
+// class TabItem {
+//   constructor(element) {
+//     // Assign this.element to the passed in element
+//     // this.element;
+//   }
 
-- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter
+//   select() {
+//     // Select all ".tabs-item" elements from the DOM
+//     // const items;
 
+//     // Remove the class "tabs-item-selected" from each element
+
+//     // Add a class named "tabs-item-selected" to this element
+//     //this.element;
+//   }
+// }
+
+/* START HERE: 
+- Select all classes named ".tabs-link" and assign that value to the links variable
+- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList
+- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter
 */
 
-links = document.querySelectorAll();
+// links = document.querySelectorAll();
+
+class TabLink {
+  constructor(element) {
+    this.element = element;
+    this.data = this.element.dataset.tab;
+    this.item = document.querySelector(`.tabs-item[data-tab="${this.data}"]`);
+    this.itemElement = new TabItem(this.item);
+    this.element.addEventListener("click", () => this.select());
+  }
+
+  select() {
+    const links = document.querySelectorAll(".tabs-link");
+    links.forEach(link => link.classList.remove("tabs-link-selected"));
+    this.element.classList.add("tabs-link-selected");
+    this.itemElement.select();
+  }
+}
+
+class TabItem {
+  constructor(element) {
+    this.element = element;
+  }
+  select() {
+    const items = document.querySelectorAll(".tabs-item");
+    items.forEach(item => item.classList.remove("tabs-item-selected"));
+    this.element.classList.add("tabs-item-selected");
+  }
+}
+
+const links = document.querySelectorAll(".tabs-link");
+links.forEach(link => new TabLink(link));

components/Tabs/Tabs.less

@@ -46,6 +46,4 @@
       background-color: @white;
     }
   }
-}
-
-
+}