Render Header Component

README.md

@@ -29,15 +29,16 @@ 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 the HTML document in the form of a tree.
 2. What is an event?
-
+An event is any interaction that the user has with the web-page.
 3. What is an event listener?
-
+A function that specifies the type of event. It takes a callback that is fired when that
+event happens.
 4. Why would we convert a NodeList into an Array?
-
+When we need to use more advanced array methods like Map or Filter.
 5. What is a component?
-
+A reusable template for DOM objects. 
 ### Git Set up
 
 * [ ] Fork the project into your GitHub user account
@@ -51,7 +52,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,26 @@
 //
 //  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 = res.data.topics;
+      tabs.forEach(item => {
+        const tabsRendered = tabCreator(item);
+        trending.appendChild(tabsRendered);
+      })
+    })
+      .catch(err => console.log(err))
+
+
+function tabCreator(topic) {
+
+  const tab = document.createElement('div')
+  tab.classList.add('tab')
+  tab.textContent = topic
+
+  return tab
+
+}