diff --git a/README.md b/README.md index 9927ac13a..6f7071187 100644 --- a/README.md +++ b/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 ``. -* [ ] Implement the project on your newly created `` branch, committing changes regularly. -* [ ] Push commits: git push origin ``. +* [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 ``. +* [x] Implement the project on your newly created `` branch, committing changes regularly. +* [x] Push commits: git push origin ``. **Follow these steps for completing your project.** -* [ ] Submit a Pull-Request to merge 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 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 diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..d78a86a64 100644 --- a/components/Dropdown/Dropdown.js +++ b/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'); } } diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..8b94365b4 100644 --- a/components/Tabs/Tabs.js +++ b/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(); \ No newline at end of file diff --git a/index.html b/index.html index febb5870b..34ec53d34 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ - + + Advanced Components @@ -38,12 +39,13 @@ +
Quote 1
- Don’t Panic. + Other Tabs! Show yourselves!
@@ -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.
+ +
+
+
Quote 5
+
+ 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. +

~Mark Twain +
+