Shaelie raby

src/components/card.js

@@ -17,6 +17,32 @@ const Card = (article) => {
   //   </div>
   // </div>
   //
+  const cardWrap = document.createElement("div");
+  const headline = document.createElement("div");
+  const author = document.createElement("div");
+  const imgContainer = document.createElement("div");
+  const img = document.createElement("img");
+  const authorName = document.createElement("span");
+
+  cardWrap.classList.add("card");
+  headline.classList.add("headline");
+  author.classList.add("author");
+  imgContainer.classList.add("img-container");
+
+  imgContainer.appendChild(img);
+  author.appendChild(imgContainer);
+  author.appendChild(authorName);
+  cardWrap.appendChild(headline)
+  cardWrap.appendChild(author);
+
+  headline.textContent = article.headline;
+  img.src = article.authorPhoto;
+  authorName.textContent = `BY ${article.authorName}`;
+  cardWrap.addEventListener("click", () => {
+    console.log(article.headline)
+  })
+  //what
+return cardWrap;
 }
 
 const cardAppender = (selector) => {
@@ -28,6 +54,24 @@ const cardAppender = (selector) => {
   // Create a card from each and every article object in the response, using the Card component.
   // Append each card to the element in the DOM that matches the selector passed to the function.
   //
+  const cardContainer = document.querySelector(selector);
+
+  fetch('http://localhost:5001/api/articles')
+    .then(response => response.json())
+    .then(data => {
+      for (const category in data) {
+       if(Array.isArray(data[category])) {
+        data[category].forEach(article => {
+          const card = Card(article);
+          cardContainer.appendChild(card);
+        });
+      }
+    }
+    })
+    .catch(error => {
+      console.log('Error', error);
+    });
 }
 
+
 export { Card, cardAppender }

src/components/header.js

@@ -11,8 +11,28 @@ const Header = (title, date, temp) => {
   //    <span class="temp">{ temp }</span>
   //  </div>
   //
-}
+  const headingWrap = document.createElement("div");
+  const dateSpan = document.createElement("span");
+  const tempSpan = document.createElement("span");
+  const titleHead = document.createElement("h1");
+
+  dateSpan.textContent = date;
+  tempSpan.textContent = temp;
+  titleHead.textContent = title;
+
+  headingWrap.classList.add("header");
+  dateSpan.classList.add("date");
+  tempSpan.classList.add("temp");
+
+  headingWrap.appendChild(dateSpan);
+  headingWrap.appendChild(titleHead);
+  headingWrap.appendChild(tempSpan);
 
+
+  return headingWrap;
+
+}
+
 const headerAppender = (selector) => {
   // TASK 2
   // ---------------------
@@ -26,6 +46,17 @@ const headerAppender = (selector) => {
   // We are taking care of passing in the correct selector on line 16,
   // so all that you need to do is pass it into the querySelector method
   // for the tests to work!
-}
+
+  const headerContainer = document.querySelector(selector);
+  const existingHeader = headerContainer.querySelector('.header');
+  if(existingHeader){
+    headerContainer.removeChild(existingHeader);
+  }
+  const header = Header();
+  headerContainer.appendChild(header);
+};
+window.addEventListener("DOMContentLoaded", () => {
+  headerAppender(".header-container")
+})
 
 export { Header, headerAppender }

src/components/tabs.js

@@ -13,6 +13,18 @@ const Tabs = (topics) => {
   //   <div class="tab">technology</div>
   // </div>
   //
+  const topicWrap = document.createElement("div");
+
+  topicWrap.classList.add("topics");
+
+  topics.forEach(tab => {
+    const tabs = document.createElement("div");
+    tabs.classList.add("tab");
+    tabs.textContent = tab;
+    topicWrap.appendChild(tabs);
+
+  });
+   return topicWrap
 }
 
 const tabsAppender = (selector) => {
@@ -23,6 +35,17 @@ const tabsAppender = (selector) => {
   // Find the array of topics inside the response, and create the tabs using the Tabs component.
   // Append the tabs to the element in the DOM that matches the selector passed to the function.
   //
+  fetch(`http://localhost:5001/api/topics`)
+  .then(response => response.json())
+  .then(data => {
+    const topics = data.topics;
+    const tabs = Tabs(topics)
+    const container = document.querySelector(selector);
+    container.appendChild(tabs)
+  })
+  .catch(error => {
+    console.error("Error grabbing the gudstuff", error)
+  })
 }
 
 export { Tabs, tabsAppender }