diff --git a/README.md b/README.md index 9927ac13a..c029f26b8 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ In this project, our design team has already built an HTML/CSS web page for us, * [ ] 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. - + ## Description ### Part One (The Dropdown) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..2d749dfbd 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 = document.querySelector('.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(); + 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..9d0a35ded 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,62 +1,61 @@ - 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(`.tab-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.bind(this)) }; 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(tab => { + tab.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(this.itemElement); } } 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 - + 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-link-selected') } } /* 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(); \ No newline at end of file +links = document.querySelectorAll('.tabs-link').forEach(link => new TabLink(link)); \ No newline at end of file