From e9ce7414cddc65cd9879111f97231bd327803778 Mon Sep 17 00:00:00 2001 From: Tara Sherman Date: Tue, 7 May 2019 20:11:51 -0400 Subject: [PATCH 1/6] initial commit --- components/Tabs/Tabs.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..39c29588b 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -59,4 +59,6 @@ class TabItem { */ -links = document.querySelectorAll(); \ No newline at end of file +links = document.querySelectorAll(); + +// initial commit \ No newline at end of file From 70e942e7ef0bdb0cbbaf786009d38eb66dd8ee63 Mon Sep 17 00:00:00 2001 From: Tara Sherman Date: Tue, 7 May 2019 21:10:31 -0400 Subject: [PATCH 2/6] Tabs.js --- components/Tabs/Tabs.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 39c29588b..1559ef2e9 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -2,33 +2,37 @@ 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 (`.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; + 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 => { + 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(); } } @@ -59,6 +63,8 @@ class TabItem { */ -links = document.querySelectorAll(); +links = document.querySelectorAll('.tabs-link').forEach(link => { + new TabLink (link); +}); // initial commit \ No newline at end of file From 0a00a40a4c911bda541bb290bb853e3cffe659cb Mon Sep 17 00:00:00 2001 From: Tara Sherman Date: Thu, 9 May 2019 20:32:03 -0400 Subject: [PATCH 3/6] Dropdown.js completed --- components/Dropdown/Dropdown.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..62ffcbe4b 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,26 +2,26 @@ 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 = this.element.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'); + }; +}; // Nothing to do here, just study what the code is doing and move on to the Dropdown class From e07a2b4e50f210185237206df781bd3a825a92ef Mon Sep 17 00:00:00 2001 From: Tara Sherman Date: Thu, 9 May 2019 20:54:53 -0400 Subject: [PATCH 4/6] Dropdown working --- components/Dropdown/Dropdown.js | 10 +++++----- components/Tabs/Tabs.js | 23 +++++++++++------------ 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 62ffcbe4b..885748ee7 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -13,15 +13,15 @@ class Dropdown { // 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.classList.toggle('dropdown-hidden');; + } +} // Nothing to do here, just study what the code is doing and move on to the Dropdown class diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 1559ef2e9..e89a430a9 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -33,25 +33,26 @@ class TabLink { // 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; - } + this.element = element; + }; select() { // Select all ".tabs-item" elements from the DOM - // const items; + const items = querySelectorAll('.tabs-item'); // Remove the class "tabs-item-selected" from each element - + Array.from(items).forEach(link => { + link.classList.remove('.tabs-item-selected')}); // Add a class named "tabs-item-selected" to this element - //this.element; - } -} + this.element.classList.add('.tabs-item-selected'); + }; +}; /* START HERE: @@ -65,6 +66,4 @@ class TabItem { links = document.querySelectorAll('.tabs-link').forEach(link => { new TabLink (link); -}); - -// initial commit \ No newline at end of file +}); \ No newline at end of file From 8c3afdda79398d70fc89228fc8acc62c54bb508b Mon Sep 17 00:00:00 2001 From: Tara Sherman Date: Thu, 9 May 2019 21:04:34 -0400 Subject: [PATCH 5/6] Tabs.js working --- components/Tabs/Tabs.js | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index e89a430a9..7a092f349 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 @@ -8,14 +7,13 @@ class TabLink { this.data = this.element.dataset.tab; // Using the custom data attribute get the associated Item element - this.itemElement = document.querySelector (`.tabs-item[data-tab = '${this.data}']`); + this.itemElement = document.querySelector(`.tabs-item[data-tab = '${this.data}']`); // Using the Item element, create a new instance of the TabItem class 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(); + this.element.addEventListener('click', () => {this.select(); }); }; @@ -24,9 +22,7 @@ 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 => { - link.classList.remove('tabs-link-selected'); - }); + Array.from(links).forEach(link => link.classList.remove('tabs-link-selected')); // Add a class named "tabs-link-selected" to this link this.element.classList.add('tabs-link-selected'); @@ -44,16 +40,17 @@ class TabItem { select() { // Select all ".tabs-item" elements from the DOM - const items = querySelectorAll('.tabs-item'); + const items = document.querySelectorAll('.tabs-item'); // Remove the class "tabs-item-selected" from each element - Array.from(items).forEach(link => { - link.classList.remove('.tabs-item-selected')}); + Array.from(items).forEach(link => link.classList.remove('tabs-item-selected')); + // Add a class named "tabs-item-selected" to this element - this.element.classList.add('.tabs-item-selected'); + this.element.classList.add('tabs-item-selected'); }; }; + /* START HERE: - Select all classes named ".tabs-link" and assign that value to the links variable @@ -64,6 +61,4 @@ class TabItem { */ -links = document.querySelectorAll('.tabs-link').forEach(link => { - new TabLink (link); -}); \ No newline at end of file +const links = document.querySelectorAll('.tabs-link').forEach(link => new TabLink(link)); \ No newline at end of file From 308c96fbe3afa595b55650f210a3c9bd370e717d Mon Sep 17 00:00:00 2001 From: Tara Sherman Date: Thu, 9 May 2019 21:16:39 -0400 Subject: [PATCH 6/6] MVP --- index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/index.html b/index.html index febb5870b..3e7a9a672 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@
Tab 2
Tab 3
Tab 4
+
Tab 5
@@ -72,6 +73,12 @@ that this has already happened.
+
+
Quote 5
+
+ “…it has great practical value – you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can’t see it, it can’t see you – daft as a bush, but very, very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough.” +
+