From 926601aa39a35b6e6a65ed021654abe67e104d36 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 18 Apr 2019 19:08:42 -0700 Subject: [PATCH 01/18] hopefully this is correct --- README.md | 2 +- components/Dropdown/Dropdown.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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..4ebb35067 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,10 +2,10 @@ class Dropdown { constructor(element) { // Assign this.element to the dropdown element - this.element; + this.element = document.querySelectorAll('.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; From ab2f5dcb0f98e7f85e2b244b54c0a8889ef5d43e Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 18 Apr 2019 19:13:28 -0700 Subject: [PATCH 02/18] doing it bit by bit --- components/Dropdown/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 4ebb35067..64282fc6e 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -8,7 +8,7 @@ class Dropdown { 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 1c120b87535d5134974da9fb1becf3ed232c3b70 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 18 Apr 2019 19:19:45 -0700 Subject: [PATCH 03/18] im getting somewhere --- components/Dropdown/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 64282fc6e..382f9c4bf 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -12,7 +12,7 @@ class Dropdown { // Add a click handler to the button reference and call the toggleContent method. this.button.addEventListener('click', () => { - + this.toggleContent() }) } From 0b0875b881b33da7c51ff53607560125e624d58b Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 18 Apr 2019 20:31:10 -0700 Subject: [PATCH 04/18] idk if this is right --- components/Dropdown/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 382f9c4bf..525b7f319 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -19,7 +19,7 @@ class Dropdown { toggleContent() { // Toggle the ".dropdown-hidden" class off and on - this.content; + this.content.classList.toggle('.dropdown-hidden'); } } From ef1d1f7f758c2b1aafb4a772e681c50c2af36742 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Wed, 1 May 2019 20:40:33 -0700 Subject: [PATCH 05/18] lets do this again --- components/Dropdown/Dropdown.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 525b7f319..c6cad4454 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 = document.querySelectorAll('.dropdown'); + 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('.dropdown-button'); + this.button = this.element.querySelector(); // assign the reference to the ".dropdown-content" class found in the dropdown element - this.content = this.element.querySelector('.dropdown-content'); + this.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.classList.toggle('.dropdown-hidden'); + this.content; } } From 1f7474699298889600720fbe10b6f463f555fe86 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Wed, 1 May 2019 20:50:16 -0700 Subject: [PATCH 06/18] ok then.. --- components/Dropdown/Dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..1d2315673 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,10 +2,10 @@ class Dropdown { constructor(element) { // Assign this.element to the dropdown element - this.element; + this.element = document.querySelectorAll('.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(''); // assign the reference to the ".dropdown-content" class found in the dropdown element this.content; From f5751f89b599e2a3933c80d1ba0e4a392e204e49 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 17:47:14 -0700 Subject: [PATCH 07/18] this should be correct --- components/Dropdown/Dropdown.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 1d2315673..8947b58bc 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,13 +2,14 @@ class Dropdown { constructor(element) { // Assign this.element to the dropdown element - this.element = document.querySelectorAll('.dropdown'); + this.element = document.querySelector('.dropdown'); + console.log(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(''); + 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', () => { From f4cb3b9180dcc359ea928ba0025e2e6e9f48ac11 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 17:58:10 -0700 Subject: [PATCH 08/18] ok that works --- components/Dropdown/Dropdown.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 8947b58bc..e228fa95f 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -3,7 +3,6 @@ class Dropdown { // Assign this.element to the dropdown element this.element = document.querySelector('.dropdown'); - console.log(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('.dropdown-button'); From 18eb67ac6c6d92a693805a44674f06e37b8ab740 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 18:08:05 -0700 Subject: [PATCH 09/18] will this work? --- components/Dropdown/Dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index e228fa95f..fbbcd936e 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -12,14 +12,14 @@ class Dropdown { // Add a click handler to the button reference and call the toggleContent method. this.button.addEventListener('click', () => { - + this.button.toggleContent(); }) } toggleContent() { // Toggle the ".dropdown-hidden" class off and on - this.content; + this.content.classList.toggle('dropdown-hidden'); } } From 2bb8dacfa05e6ff3c51ed59786a1e454622843b4 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 18:09:18 -0700 Subject: [PATCH 10/18] its easier then i think --- components/Dropdown/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index fbbcd936e..2d749dfbd 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -12,7 +12,7 @@ class Dropdown { // Add a click handler to the button reference and call the toggleContent method. this.button.addEventListener('click', () => { - this.button.toggleContent(); + this.toggleContent(); }) } From c21b5e608cee0eb498b55897c063e19d302462f3 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 18:13:21 -0700 Subject: [PATCH 11/18] lets see if i can do it right this time --- components/Tabs/Tabs.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..9d3576f4e 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,4 +1,3 @@ - class TabLink { constructor(element) { // Assign this.element to the passed in DOM element @@ -50,13 +49,9 @@ class TabItem { } /* 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 From cce8b498d6e839cd416b89a37c2ef2348e5abba2 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 18:40:28 -0700 Subject: [PATCH 12/18] im working --- components/Tabs/Tabs.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 9d3576f4e..a55846b4a 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,16 +1,16 @@ 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 = document.querySelector(`.data[data-tab= '${this.element.dataset.tab}']`); // Using the custom data attribute get the associated Item element - // this.itemElement; + this.itemElement = ; // Using the Item element, create a new instance of the TabItem class - // this.tabItem; + this.tabItem = new ; // Add a click event listener on this instance, calling the select method on click @@ -54,4 +54,4 @@ class TabItem { - 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 From 5da28982cc8b5bce4a2f6147da3579c154a637f9 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 18:50:46 -0700 Subject: [PATCH 13/18] hopefully this is working --- components/Tabs/Tabs.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index a55846b4a..54ae97f94 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -10,18 +10,20 @@ class TabLink { this.itemElement = ; // Using the Item element, create a new instance of the TabItem class - this.tabItem = new ; + this.tabItem = new TabItem(this.tabItem); // 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(link => { + document.querySelectorAll('.tabs-link-selected').remove + }); // Add a class named "tabs-link-selected" to this link // this.element; From 0f88961d8bf54ad2c198d31d1e64e44bf0997ec0 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 19:56:55 -0700 Subject: [PATCH 14/18] pair coding --- components/Tabs/Tabs.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 54ae97f94..8a9f5211f 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -4,10 +4,10 @@ class TabLink { this.element = element; // Get the custom data attribute on the Link - this.data = document.querySelector(`.data[data-tab= '${this.element.dataset.tab}']`); + 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 = new TabItem(this.tabItem); @@ -21,12 +21,12 @@ class TabLink { 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 => { - document.querySelectorAll('.tabs-link-selected').remove + 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 = tab.classList.add('tabs-link-selected'); // Call the select method on the item associated with this link From 08545d74919c15fbf19a2e80e2574bb1b93c5cd5 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 20:12:33 -0700 Subject: [PATCH 15/18] this is rough --- components/Tabs/Tabs.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 8a9f5211f..119802a24 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -10,7 +10,7 @@ class TabLink { this.itemElement = document.querySelector(`.tab-item[data-tab= '${this.data}]`); // Using the Item element, create a new instance of the TabItem class - this.tabItem = new TabItem(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)) @@ -29,24 +29,25 @@ class TabLink { this.element = tab.classList.add('tabs-link-selected'); // Call the select method on the item associated with this link - - } + this.itemElement.select(this.tabItem); + }// FINISH THIS SECTION// } 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 = item.classList.add('tabs-item-selected'); } } From 3a10dbb46d2caa53102fc25908c9e0f2d6f37ddd Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 20:16:39 -0700 Subject: [PATCH 16/18] im not getting it --- components/Tabs/Tabs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 119802a24..59f77c191 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -45,7 +45,8 @@ class TabItem { // Remove the class "tabs-item-selected" from each element items.forEach(item => { - item.classList.remove('tabs-item-selected')) + item.classList.remove('tabs-item-selected') + }) // Add a class named "tabs-item-selected" to this element this.element = item.classList.add('tabs-item-selected'); } From be6ca99a7296aec876f3ff0e55fa9b084f58c724 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 20:25:22 -0700 Subject: [PATCH 17/18] now it works --- components/Tabs/Tabs.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 59f77c191..7d7a3479f 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -26,11 +26,11 @@ class TabLink { }); // Add a class named "tabs-link-selected" to this link - this.element = tab.classList.add('tabs-link-selected'); + this.element.classList.add('tabs-link-selected'); // Call the select method on the item associated with this link - this.itemElement.select(this.tabItem); - }// FINISH THIS SECTION// + this.tabItem.select(this.itemElement); + } } class TabItem { From 7d929ea76c20a11797967730d19752cae5020e47 Mon Sep 17 00:00:00 2001 From: JustSpokenCodes Date: Thu, 2 May 2019 20:34:22 -0700 Subject: [PATCH 18/18] now it should show something --- components/Tabs/Tabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 7d7a3479f..9d0a35ded 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -48,7 +48,7 @@ class TabItem { item.classList.remove('tabs-item-selected') }) // Add a class named "tabs-item-selected" to this element - this.element = item.classList.add('tabs-item-selected'); + this.element.classList.add('tabs-link-selected') } }