Commit

README.md

@@ -12,18 +12,18 @@ In this project, our design team has already built an HTML/CSS web page for us,
 
 **Follow these steps to set up and work on your project:**
 
-* [ ] Create a forked copy of this project.
-* [ ] Add your project manager as collaborator on Github.
-* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-* [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-* [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-* [ ] Push commits: git push origin `<firstName-lastName>`.
+* [x] Create a forked copy of this project.
+* [x] Add your project manager as collaborator on Github.
+* [x] Clone your OWN version of the repository (Not Lambda's by mistake!).
+* [x] Create a new branch: git checkout -b `<firstName-lastName>`.
+* [x] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+* [x] Push commits: git push origin `<firstName-lastName>`.
 
 **Follow these steps for completing your project.**
 
-* [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
-* [ ] Add your project manager as a reviewer on the pull-request
-* [ ] Your project manager will count the project as complete by merging the branch back into master.
+* [x] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
+* [x] Add your project manager as a reviewer on the pull-request
+* [x] Your project manager will count the project as complete by merging the branch back into master.
 
 ## Description
 

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 = document.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,54 +1,70 @@
 
 class TabLink {
-  constructor(element) {
+  constructor(linkelement) {
+    this.element = linkelement;
     // Assign this.element to the passed in DOM element
-    // this.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;
-
-    // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links
-    // Array.from(links).forEach();
+
+    // // Get all of the elements with the tabs-link class
+    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(link => link.classList.remove('tabs-link-selected'));
+    Array.from(links).map(link => link.classList.remove('tabs-link-selected'));
 
     // Add a class named "tabs-link-selected" to this link
-    // this.element;
-
-    // Call the select method on the item associated with this link
+    this.element.classList.toggle('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;
+  constructor(item) {
+	// Assign this.element to the passed in element
+
+    //this.tabElement=tabElement;
+    this.item = item;
+
+
   }
 
-  select() {
-    // Select all ".tabs-item" elements from the DOM
-    // const items;
+  select() { //Switch
+  // Select all ".tabs-item" elements from the DOM
+  let item = document.querySelectorAll('.tabs-item');
+  Array.from(item).map(items => items.classList.remove('tabs-item-selected'));
+
+
+  // Remove the class "tabs-item-selected" from each element
+  // Why won't this work!!! ??? 
+  //Array.from(item).map(items => items.classList.remove('tabs-item-selected'));
+
+  // Add a class named "tabs-item-selected" to this element 
+  this.item.classList.toggle('tabs-item-selected');
+
 
-    // 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
@@ -58,5 +74,7 @@ class TabItem {
 - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter
 
 */
+let links = document.querySelectorAll('.tabs-link');
+
+links = Array.from(links).map((linkelement) => new TabLink(linkelement));
 
-links = document.querySelectorAll();

index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
-	<head>
+
+<head>
 		<title>Advanced Components</title>
 		<link rel="stylesheet" href="./CSS/index.css">
 	</head>
@@ -38,12 +39,13 @@
 						<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">
 							<div class="tabs-item-title">Quote 1</div>
 							<div class="tabs-item-description">
-								Don’t Panic.
+								Other Tabs! Show yourselves!
 							</div>
 						</div>
 						<div class="tabs-item" data-tab="2">
@@ -71,6 +73,15 @@
 								instantly disappear and be replaced by something even more bizarre and inexplicable. There is another theory which states
 								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">
+								There are basically two types of people. People who accomplish things, and people who claim to have accomplished things. The first group is less crowded.
+                                <br><br> ~Mark Twain  
+							</div>
+
 						</div>
 					</div>
 				</div>