From 690220ba5352382569c436b5eb6ff324c311ad6b Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Tue, 11 Jun 2019 07:39:41 -0700 Subject: [PATCH 1/8] Commit --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 9927ac13a..5d2c82af4 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,11 @@ In this project, our design team has already built an HTML/CSS web page for us, **Follow these steps to set up and work on your project:** -* [ ] Create a forked copy of this project. -* [ ] Add your project manager as collaborator on Github. -* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -* [ ] Create a new branch: git checkout -b ``. -* [ ] Implement the project on your newly created `` branch, committing changes regularly. +* [x] Create a forked copy of this project. +* [x] Add your project manager as collaborator on Github. +* [x] Clone your OWN version of the repository (Not Lambda's by mistake!). +* [x] Create a new branch: git checkout -b ``. +* [x] Implement the project on your newly created `` branch, committing changes regularly. * [ ] Push commits: git push origin ``. **Follow these steps for completing your project.** From 9325fa787d601e504013710a4a44546b809c5f5f Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Wed, 12 Jun 2019 09:37:42 -0700 Subject: [PATCH 2/8] Commit --- README.md | 4 ++-- index.html | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5d2c82af4..7f9c8e627 100644 --- a/README.md +++ b/README.md @@ -17,11 +17,11 @@ In this project, our design team has already built an HTML/CSS web page for us, * [x] Clone your OWN version of the repository (Not Lambda's by mistake!). * [x] Create a new branch: git checkout -b ``. * [x] Implement the project on your newly created `` branch, committing changes regularly. -* [ ] Push commits: git push origin ``. +* [x] Push commits: git push origin ``. **Follow these steps for completing your project.** -* [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** +* [x] 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. diff --git a/index.html b/index.html index febb5870b..64e4773f4 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ - + + Advanced Components From 196997fd6eda8fc1e66aa6d08b40012d491b6088 Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Wed, 12 Jun 2019 09:39:34 -0700 Subject: [PATCH 3/8] Commit --- 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 c6cad4454..0bfa369b3 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,7 +2,7 @@ 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(); From 139a987f48b5588d8fd02ec27403ec53e944e825 Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Wed, 12 Jun 2019 10:32:17 -0700 Subject: [PATCH 4/8] Commit --- 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 0bfa369b3..00b5f363b 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -5,10 +5,10 @@ class Dropdown { 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 = document.querySelector('.dropdown-content'); // Add a click handler to the button reference and call the toggleContent method. this.button.addEventListener('click', () => { From 23d7868190b3c6194c159f111f178820d56db932 Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Thu, 13 Jun 2019 18:40:33 -0700 Subject: [PATCH 5/8] Commit - Not sure how, but it works. The Tabs..... --- components/Dropdown/Dropdown.js | 4 +- components/Tabs/Tabs.js | 72 ++++++++++++++++++++------------- 2 files changed, 47 insertions(+), 29 deletions(-) diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index c6cad4454..b23649193 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -5,7 +5,7 @@ class 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(); + //this.button = this.element.querySelector(); // assign the reference to the ".dropdown-content" class found in the dropdown element this.content; @@ -25,4 +25,4 @@ class Dropdown { // 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)); \ No newline at end of file diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js index 4163d47aa..8b94365b4 100644 --- a/components/Tabs/Tabs.js +++ b/components/Tabs/Tabs.js @@ -1,54 +1,70 @@ class TabLink { - constructor(element) { + constructor(linkelement) { + this.element = linkelement; // Assign this.element to the passed in DOM element - // this.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; - - // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - // Array.from(links).forEach(); + + // // Get all of the elements with the tabs-link class + 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).map(link => link.classList.remove('tabs-link-selected')); // Add a class named "tabs-link-selected" to this link - // this.element; - - // Call the select method on the item associated with this link + this.element.classList.toggle('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; + constructor(item) { + // Assign this.element to the passed in element + + //this.tabElement=tabElement; + this.item = item; + + } - select() { - // Select all ".tabs-item" elements from the DOM - // const items; + select() { //Switch + // Select all ".tabs-item" elements from the DOM + let item = document.querySelectorAll('.tabs-item'); + Array.from(item).map(items => items.classList.remove('tabs-item-selected')); + + + // Remove the class "tabs-item-selected" from each element + // Why won't this work!!! ??? + //Array.from(item).map(items => items.classList.remove('tabs-item-selected')); + + // Add a class named "tabs-item-selected" to this element + this.item.classList.toggle('tabs-item-selected'); + - // Remove the class "tabs-item-selected" from each element - - // Add a class named "tabs-item-selected" to this element - //this.element; } } + /* START HERE: - Select all classes named ".tabs-link" and assign that value to the links variable @@ -58,5 +74,7 @@ class TabItem { - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter */ +let links = document.querySelectorAll('.tabs-link'); + +links = Array.from(links).map((linkelement) => new TabLink(linkelement)); -links = document.querySelectorAll(); \ No newline at end of file From b0beb01a8e2b197b23656f37687106f007af4b96 Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Thu, 13 Jun 2019 18:43:07 -0700 Subject: [PATCH 6/8] Commit --- README.md | 4 ++-- components/Dropdown/Dropdown.js | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 5d2c82af4..7f9c8e627 100644 --- a/README.md +++ b/README.md @@ -17,11 +17,11 @@ In this project, our design team has already built an HTML/CSS web page for us, * [x] Clone your OWN version of the repository (Not Lambda's by mistake!). * [x] Create a new branch: git checkout -b ``. * [x] Implement the project on your newly created `` branch, committing changes regularly. -* [ ] Push commits: git push origin ``. +* [x] Push commits: git push origin ``. **Follow these steps for completing your project.** -* [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** +* [x] 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. diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index b23649193..1e2510ad6 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -2,13 +2,17 @@ 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) +<<<<<<< HEAD //this.button = this.element.querySelector(); +======= + this.button = this.element.querySelector('.dropdown-button'); +>>>>>>> 139a987f48b5588d8fd02ec27403ec53e944e825 // 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 f2cbdd6a49fc8048513725a091626a7ecbf145e2 Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Thu, 13 Jun 2019 18:57:46 -0700 Subject: [PATCH 7/8] Commit --- README.md | 4 ++-- components/Dropdown/Dropdown.js | 12 ++++-------- index.html | 10 ++++++++++ 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 7f9c8e627..6f7071187 100644 --- a/README.md +++ b/README.md @@ -22,8 +22,8 @@ In this project, our design team has already built an HTML/CSS web page for us, **Follow these steps for completing your project.** * [x] 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. +* [x] Add your project manager as a reviewer on the pull-request +* [x] Your project manager will count the project as complete by merging the branch back into master. ## Description diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js index 1e2510ad6..d78a86a64 100644 --- a/components/Dropdown/Dropdown.js +++ b/components/Dropdown/Dropdown.js @@ -5,28 +5,24 @@ class Dropdown { this.element = element; // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context) -<<<<<<< HEAD - //this.button = this.element.querySelector(); -======= - this.button = this.element.querySelector('.dropdown-button'); ->>>>>>> 139a987f48b5588d8fd02ec27403ec53e944e825 + this.button = this.element.querySelector(".dropdown-button"); // assign the reference to the ".dropdown-content" class found in the dropdown element 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'); } } // 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)); \ No newline at end of file diff --git a/index.html b/index.html index 64e4773f4..885b95325 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,7 @@
Tab 2
Tab 3
Tab 4
+
Tab 5
@@ -72,6 +73,15 @@ instantly disappear and be replaced by something even more bizarre and inexplicable. There is another theory which states that this has already happened.
+ +
+
+
Quote 5
+
+ There are basically two types of people. People who accomplish things, and people who claim to have accomplished things. The first group is less crowded. +
~Mark Twain +
+
From d32ca40217aec705c5524bf9da3e309a9f40751e Mon Sep 17 00:00:00 2001 From: Carl Stanley <49922081+Carl-Stanley@users.noreply.github.com> Date: Thu, 13 Jun 2019 19:04:15 -0700 Subject: [PATCH 8/8] Final commit --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 885b95325..34ec53d34 100644 --- a/index.html +++ b/index.html @@ -39,13 +39,13 @@
Tab 2
Tab 3
Tab 4
-
Tab 5
+
Tab 5
Quote 1
- Don’t Panic. + Other Tabs! Show yourselves!
@@ -79,7 +79,7 @@
Quote 5
There are basically two types of people. People who accomplish things, and people who claim to have accomplished things. The first group is less crowded. -
~Mark Twain +

~Mark Twain