Matthew thomas

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
 

components/Tabs/Tabs.js

@@ -2,60 +2,73 @@ 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());
   }
 }
 
 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();
+let tabs = document.querySelectorAll('.tab').forEach( tab => new TabLink(tab))

index.html

@@ -213,6 +213,51 @@ <h1>Lambda Times</h1>
       </div>
     </div>
 
+    <div class="card" data-tab="bootstrap">
+      <div class="headline">Bootstrap test subject</div>
+      <div class="author">
+        <div class="img-container">
+          <img src="./assets/max.jpg" />
+        </div>
+        <span>By Matt Thomas</span>
+      </div>
+    </div>
+
+    <div class="card" data-tab="jquery">
+      <div class="headline">jquery test subjects</div>
+      <div class="author">
+        <div class="img-container">
+          <img src="./assets/max.jpg" />
+        </div>
+        <span>By Matt Thomas</span>
+      </div>
+    </div>
+
+    <div class="card" data-tab="technology">
+      <div class="headline">technology test subjects</div>
+      <div class="author">
+        <div class="img-container">
+          <img src="./assets/max.jpg" />
+        </div>
+        <span>By Matt Thomas</span>
+      </div>
+    </div>
+
+    <div class="card" data-tab="javascript">
+      <div class="headline">javascript test subject</div>
+      <div class="author">
+        <div class="img-container">
+          <img src="./assets/max.jpg" />
+        </div>
+        <span>By Matt Thomas</span>
+      </div>
+    </div>
+
+
+
+
+
+
   </div>
 </body>