Cory hedeen

README.md

@@ -29,15 +29,17 @@ Demonstrate your understanding of this week's concepts by answering the followin
 Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager
 
 1. What is the DOM?
-
+The DOM is a representation of an HTML document that takes the form of a tree and turns
+each part of the document into a node object.
 2. What is an event?
-
+An event is any user interaction with the web page.
 3. What is an event listener?
-
+An event listener is a function that executes a callback when an event occurs.
 4. Why would we convert a NodeList into an Array?
-
+So that we can use more advanced array methods like Map or Filter.
 5. What is a component?
-
+A component is a basic template for elements so that multiple elements of a similar type can
+be created using less code.
 ### Git Set up
 
 * [ ] Fork the project into your GitHub user account
@@ -51,7 +53,7 @@ Your finished project must include all of the following requirements:
 
 * [ ] Look through the HTML code and familiarize yourself with the different sections. Some of them already exist, but some need to be filled it. DO NOT add any code to the HTML file itself.
 
-* [ ] Following the instructions in the `Header/index.js` file, create the Header component. 
+* [ ] Following the instructions in the `Header/index.js` file, create the Header component.
 
 * [ ] Following the instructions in the `Tabs/index.js` file, create individual Tabs components.
 

components/Cards/index.js

@@ -17,3 +17,68 @@
 // </div>
 //
 // Create a card for each of the articles and add the card to the DOM.
+
+
+  axios.get('https://lambda-times-backend.herokuapp.com/articles')
+        .then(res =>  {
+          console.log(res.data)
+          const cardHome = document.querySelector('.cards-container')
+          const javascript = res.data.articles.javascript
+          javascript.forEach(item => {
+            const java = cardCreator(item)
+            cardHome.append(java)
+          })
+          const bootstrap = res.data.articles.bootstrap
+          bootstrap.forEach(item => {
+            const boot = cardCreator(item)
+            cardHome.append(boot)
+          })
+          const jquery = res.data.articles.jquery
+          jquery.forEach(item => {
+            const j = cardCreator(item)
+            cardHome.append(j)
+          })
+          const technology = res.data.articles.technology
+          technology.forEach(item => {
+            const tech = cardCreator(item)
+            cardHome.append(tech)
+          })
+          const node = res.data.articles.node
+          node.forEach(item => {
+            const nodeCard = cardCreator(item)
+            cardHome.append(nodeCard)
+          })
+        })
+        .catch(err => console.log(err))
+
+
+function cardCreator(article){
+
+  const card = document.createElement('div');
+  card.classList.add('card');
+
+
+    const header = document.createElement('h3')
+    header.classList.add('headline')
+    header.textContent = article.headline
+    card.appendChild(header)
+
+    const author = document.createElement('div');
+    author.classList.add('author');
+    card.appendChild(author);
+
+    const imgContainer = document.createElement('div');
+    imgContainer.classList.add('img-container');
+    author.appendChild(imgContainer);
+
+    const authorImage = document.createElement('img')
+    authorImage.setAttribute('src', article.authorPhoto)
+    imgContainer.appendChild(authorImage)
+
+    const credit = document.createElement('span');
+    credit.textContent = `By: ${article.authorName}`
+      author.appendChild(credit);
+
+    return card
+
+}

components/Header/index.js

@@ -9,4 +9,29 @@
 //  </div >
 // And add it to the DOM in the .headerContainer component
 
-function Header() {}
+const container = document.querySelector('.header-container')
+const headerComponent = Header();
+container.appendChild(headerComponent)
+
+function Header() {
+
+  const header = document.createElement('div');
+  header.classList.add('header');
+
+  const date = document.createElement('span');
+  date.classList.add('date');
+  date.textContent = "SMARCH 28, 2019";
+
+  const title = document.createElement('h1');
+  title.textContent = "Lambda Times";
+
+  const temp = document.createElement('span');
+  temp.classList.add('temp');
+  temp.textContent = "98";
+
+  header.appendChild(date);
+  header.appendChild(title);
+  header.appendChild(temp);
+
+  return header;
+}

components/Tabs/index.js

@@ -7,3 +7,23 @@
 //
 //  The tab component should look like this:
 //    <div class="tab">topic here</div>
+
+
+axios.get('https://lambda-times-backend.herokuapp.com/topics')
+      .then(res => { console.log(res.data)
+      const trending = document.querySelector('.topics');
+      const tabs = tabCreator(res.data);
+      trending.appendChild(tabs);
+    })
+      .catch(err => console.log(err))
+
+
+function tabCreator(topic) {
+
+  const tab = document.createElement('div')
+  tab.classList.add('tab')
+  tab.textContent = topic.topics
+
+  return tab
+
+}