diff --git a/README.md b/README.md
index 34f681728e..1c73723011 100644
--- a/README.md
+++ b/README.md
@@ -32,30 +32,40 @@ Edit this document to include your answers after each question. Make sure to lea
1. What is the DOM?
+DOM is a representation of the HTML of a webpage, it acts as a bridge between the content and the browser
+
2. What is an event?
+something that happens to the html elements, they can be used to execute code
+
3. What is an event listener?
+a function on a webpage that only runs once an event occurs
+
4. Why would we convert a NodeList into an Array?
+because Nodelists return a static list that can not be updated and manipulated the same way a javascript list can
+
5. What is a component?
+a piece of code that can be reused to share functionality and styling betweens elements on a webpage
+
### Git Set up
-* [ ] Fork the project into your GitHub user account
-* [ ] Clone the forked project into a directory on your machine
-* [ ] Create a pull request before you start working on the project requirements. You will continuously push your updates throughout the project.
-* [ ] You are now ready to build this project with your preferred IDE
+* [x] Fork the project into your GitHub user account
+* [x] Clone the forked project into a directory on your machine
+* [x] Create a pull request before you start working on the project requirements. You will continuously push your updates throughout the project.
+* [x] You are now ready to build this project with your preferred IDE
## Minimum Viable Product
Your finished project must include all of the following requirements:
-* [ ] Look through the HTML code paying particular attention to the Tabs component and the Cards components. You will notice they share a data attribute. We will be using this data attribute to determine which cards should show when each tab is selected.
+* [x] Look through the HTML code paying particular attention to the Tabs component and the Cards components. You will notice they share a data attribute. We will be using this data attribute to determine which cards should show when each tab is selected.
-* [ ] Following the instructions in the `Tabs.js` file, complete the `TabLink`, and `TabCard` class components. It will look and feel very similar to the last project we worked on, but with a twist. Now, instead of one `Item` to display, we will need to display a collection of `Cards`. Think about ways to iterate over an array and manipulate each item. **Note: You will need to un-comment the code after the lines of instructions. The code is commented out so you can work error-free**
+* [x] Following the instructions in the `Tabs.js` file, complete the `TabLink`, and `TabCard` class components. It will look and feel very similar to the last project we worked on, but with a twist. Now, instead of one `Item` to display, we will need to display a collection of `Cards`. Think about ways to iterate over an array and manipulate each item. **Note: You will need to un-comment the code after the lines of instructions. The code is commented out so you can work error-free**
-* [ ] Once you get your `Tab` component working properly add a couple more articles yourself and check out how it works.
+* [x] Once you get your `Tab` component working properly add a couple more articles yourself and check out how it works.
## Stretch Problems
diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js
index 41749112a9..e043d52f18 100644
--- a/components/Tabs/Tabs.js
+++ b/components/Tabs/Tabs.js
@@ -2,49 +2,60 @@ class TabLink {
constructor(tabElement){
// assign this.tabElement to the tabElement DOM reference
// this.tabElement;
+ this.tabElement = tabElement;
// Get the `data-tab` value from this.tabElement and store it here
// this.tabData = ;
+ this.tabData = this.tabElement.dataset.tab;
// We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task:
- /* <- Delete this comment block when you work on the if statement
+ // <- Delete this comment block when you work on the if statement
// Check to see if this.tabData is equal to 'all'
- if(){
+ if(this.tabData === 'all'){
+
+ this.cards = document.querySelectorAll('.card');
// If `all` is true, select all cards regardless of their data attribute values
- // this.cards = ;
} else {
+ this.cards = document.querySelectorAll(`.card[data-tab = '${this.tabData}']`)
// else if `all` is false, only select the cards with matching this.tabData values
// this.cards = ;
}
- /* <- Delete this comment block when you work on the if statement
+ // <- Delete this comment block when you work on the if statement
// Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class.
// this.cards = Array.from(this.cards).map();
-
+ this.cards = Array.from(this.cards).map(card => new TabCard(card))
// Add a click event that invokes this.selectTab
// this.tabElement.addEventListener();
+ this.tabElement.addEventListener('click', () => {
+ this.selectTab()
+ });
}
selectTab(){
// Select all elements with the .tab class on them
// const tabs = document.querySelectorAll();
-
+ const tabs = document.querySelectorAll('.tab')
// Iterate through the NodeList removing the .active-tab class from each element
// tabs.forEach()
-
+ tabs.forEach(function(tab){
+ tab.classList.remove('active-tab')
+ })
// Select all of the elements with the .card class on them
// const cards = ;
-
+ const cards = document.querySelectorAll('.card')
// Iterate through the NodeList setting the display style each one to 'none'
// cards.forEach()
-
+ cards.forEach(function(card){
+ card.style.display = 'none';
+ })
// Add a class of ".active-tab" to this.tabElement
// this.tabElement;
-
+ this.tabElement.classList.add('active-tab')
// Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here.
- // this.cards.forEach(card => card.selectCard());
+ this.cards.forEach(card => card.selectCard());
}
}
@@ -52,10 +63,12 @@ class TabCard {
constructor(cardElement){
// Assign this.cardElement to the cardElement DOM reference
// this.cardElement;
+ this.cardElement = cardElement;
}
selectCard(){
// Update the style of this.cardElement to display = "flex"
// this.cardElement;
+ this.cardElement.style.display = 'flex';
}
}
@@ -64,9 +77,10 @@ class TabCard {
- Select all classes named ".tab" and assign that value to the tabs variable
+
- With your selection in place, now chain a .forEach() method onto the tabs variable to iterate over the DOM NodeList
- In your .forEach() method's callback function, return a new instance of TabLink and pass in each tab as a parameter
*/
-let tabs = document.querySelectorAll();
\ No newline at end of file
+let tabs = document.querySelectorAll('.tab').forEach( tab => new TabLink(tab))
\ No newline at end of file
diff --git a/index.html b/index.html
index f3357f712c..06a00d27ab 100644
--- a/index.html
+++ b/index.html
@@ -213,6 +213,51 @@ Lambda Times
+
+
Bootstrap test subject
+
+
+
+
+
By Matt Thomas
+
+
+
jquery test subjects
+
+
+
+
+
By Matt Thomas
+
+
+
technology test subjects
+
+
+
+
+
By Matt Thomas
+
+
+
javascript test subject
+
+
+
+
+
By Matt Thomas
+
+