diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..885748ee7 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 = 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');; } } diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..7a092f349 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,53 +1,55 @@ - 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(); + }; +}; 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 + 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: @@ -59,4 +61,4 @@ class TabItem { */ -links = document.querySelectorAll(); \ No newline at end of file +const links = document.querySelectorAll('.tabs-link').forEach(link => new TabLink(link)); \ No newline at end of file diff --git a/index.html b/index.html index febb5870b..3e7a9a672 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@ +
@@ -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.” +
+