From 593e48d192b7279f7ca05436cd632f87bce952d5 Mon Sep 17 00:00:00 2001 From: johnschneider1 Date: Thu, 20 Jun 2019 13:28:51 -0500 Subject: [PATCH 1/5] setup project and first lines written --- components/Dropdown/Dropdown.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..06891d593 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -1,28 +1,25 @@ class Dropdown { constructor(element) { - // Assign this.element to the dropdown element - this.element; - + this.element = this.element.querySelector(".dropdown-button"); + // 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-content"); + // 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', () => { - }) + // 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; } } - // 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)); \ No newline at end of file +let dropdowns = document + .querySelectorAll(".dropdown") + .forEach(dropdown => new Dropdown(dropdown)); From 0ec137ab62c9c4ff9eeb91da9ecc20223943795f Mon Sep 17 00:00:00 2001 From: johnschneider1 Date: Thu, 20 Jun 2019 13:53:52 -0500 Subject: [PATCH 2/5] fix line error --- components/Dropdown/Dropdown.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 06891d593..93eebd865 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -1,13 +1,13 @@ class Dropdown { constructor(element) { // Assign this.element to the dropdown element - this.element = this.element.querySelector(".dropdown-button"); + 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("dropdown-content"); + this.button = this.element.querySelector(".dropdown-button"); // assign the reference to the ".dropdown-content" class found in the dropdown element - this.content; + this.content = this.element.querySelector(".dropdown-content"); // Add a click handler to the button reference and call the toggleContent method. this.button.addEventListener("click", () => {}); From c86f4c244941c74b2d05015beff43c7611ed8a8d Mon Sep 17 00:00:00 2001 From: johnschneider1 Date: Thu, 20 Jun 2019 14:33:52 -0500 Subject: [PATCH 3/5] working through tabs --- components/Dropdown/Dropdown.js | 6 ++++-- components/Tabs/Tabs.js | 26 +++++++++++--------------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 93eebd865..ad8a27dd9 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -10,12 +10,14 @@ class Dropdown { 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.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..ab9e0acc6 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,34 +1,28 @@ - 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; - + // 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 - }; + // Add a click event listener on this instance, calling the select method on click + } 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(); - // Add a class named "tabs-link-selected" to this link // this.element; - // Call the select method on the item associated with this link - } } @@ -41,9 +35,7 @@ class TabItem { 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; } @@ -59,4 +51,8 @@ class TabItem { */ -links = document.querySelectorAll(); \ No newline at end of file +const links = document.querySelectorAll(".tabs-link"); + +links.forEach(function(link) { + return new Link(link); +}); From c7d3351eaee57fcfb926966d05aa31cf8d120cee Mon Sep 17 00:00:00 2001 From: johnschneider1 Date: Thu, 20 Jun 2019 15:30:01 -0500 Subject: [PATCH 4/5] working on tabs second class --- components/Tabs/Tabs.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index ab9e0acc6..ede147270 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,16 +1,19 @@ class TabLink { constructor(element) { + //console.log("i see you", element); // Assign this.element to the passed in DOM 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}"]` + ); + console.log(this.itemElement); // Using the Item element, create a new instance of the TabItem class - // this.tabItem; + this.tabItem; // Add a click event listener on this instance, calling the select method on click } @@ -29,7 +32,7 @@ class TabLink { class TabItem { constructor(element) { // Assign this.element to the passed in element - // this.element; + this.element = element; } select() { @@ -50,9 +53,9 @@ class TabItem { - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter */ - +// nodelist const links = document.querySelectorAll(".tabs-link"); - +// iterate over nodelist, create new object links.forEach(function(link) { - return new Link(link); + return new TabLink(link); }); From 0e98fba01de55a8042a2dfffb74442a2b71c1059 Mon Sep 17 00:00:00 2001 From: johnschneider1 Date: Thu, 20 Jun 2019 16:43:44 -0500 Subject: [PATCH 5/5] prj wrapping --- components/Tabs/Tabs.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index ede147270..cb8aed69f 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -13,19 +13,25 @@ class TabLink { ); console.log(this.itemElement); // 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"); + console.log(links); // 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(); + console.log("chosen"); } } @@ -37,10 +43,13 @@ class TabItem { 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(element => { + element.classList.remove("tabs-item-selected"); + }); // Add a class named "tabs-item-selected" to this element - //this.element; + this.element.classList.add("tabs-item-selected"); } }