finished the sprint challenge with my man chris adams

Author: yfngary

src/components/card.js

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 const Card = (article) => {
   // TASK 5
   // ---------------------
@@ -17,8 +19,36 @@ const Card = (article) => {
   //   </div>
   // </div>
   //
+  const card = document.createElement('div');
+  const headline = document.createElement('div');
+  const author = document.createElement('div');
+  const imgContianer = document.createElement('div');
+  const img = document.createElement('img');
+  const byAuthor = document.createElement('span');
+
+  card.classList.add("card");
+  headline.classList.add("headline");
+  author.classList.add("author");
+  imgContianer.classList.add("img-container");
+  
+  headline.textContent = article.headline;
+  img.src = article.authorPhoto;
+  byAuthor.textContent = article.authorName;
+
+  imgContianer.append(img);
+  author.append(imgContianer);
+  author.append(byAuthor);
+  card.append(headline);
+  card.append(author);
+
+  card.addEventListener("click", () =>{
+    console.log(article.headline);
+  })
+  return card;
+
 }
 
+
 const cardAppender = (selector) => {
   // TASK 6
   // ---------------------
@@ -28,6 +58,16 @@ 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.
   //
+
+  axios.get(`http://localhost:5001/api/articles`)
+    .then(res => {
+      const testArticles = Object.values(res.data.articles)
+      const flattenArticles = testArticles.flatMap(x => x);
+      const cardContainer = document.querySelector(selector);
+      flattenArticles.forEach(article => {
+        cardContainer.append(Card(article));
+      })
+    })
 }
 
 export { Card, cardAppender }

src/components/header.js

@@ -11,6 +11,24 @@ const Header = (title, date, temp) => {
   //    <span class="temp">{ temp }</span>
   //  </div>
   //
+  const heading = document.createElement("div");
+  const dateSpan = document.createElement("span");
+  const h1Title = document.createElement("h1");
+  const tempSpan = document.createElement("span");
+
+  heading.classList.add("header");
+  dateSpan.classList.add("date");
+  tempSpan.classList.add("temp");
+
+  heading.appendChild(dateSpan);
+  heading.appendChild(h1Title);
+  heading.appendChild(tempSpan);
+
+  dateSpan.textContent = date;
+  h1Title.textContent = title;
+  tempSpan.textContent = temp;
+
+  return heading;
 }
 
 const headerAppender = (selector) => {
@@ -20,6 +38,8 @@ const headerAppender = (selector) => {
   // It should create a header using the Header component above, passing arguments of your choosing.
   // It should append the header to the element in the DOM that matches the given selector.
   //
+  const headerApp = document.querySelector(selector);
+  headerApp.appendChild(Header());
 }
 
 export { Header, headerAppender }

src/components/tabs.js

@@ -1,4 +1,8 @@
-const Tabs = (topics) => {
+import axios from "axios";
+
+const URL = 'http://localhost:5001/api/topics';
+
+function Tabs(topics) {
   // TASK 3
   // ---------------------
   // Implement this function which takes an array of strings ("topics") as its only argument.
@@ -13,6 +17,24 @@ const Tabs = (topics) => {
   //   <div class="tab">technology</div>
   // </div>
   //
+  // const topicsDiv = document.createElement("div");
+  // topicsDiv.classList.add("topics");
+  // for (let i = 0; i < topics.length; i++){
+  //   const div = document.createElement("div");
+  //   div.classList.add("tab");
+  //   iv.textContent = topics[i];
+  //   topicsDiv.appendChild(div);
+  // }
+  // return topicsDiv;
+  const topicsDiv = document.createElement("div");
+  topicsDiv.classList.add("topics");
+  topics.forEach(topic => {
+    const newDiv = document.createElement("div");
+    newDiv.classList.add("tab");
+    newDiv.textContent = topic;
+    topicsDiv.append(newDiv);
+  });
+  return topicsDiv;
 }
 
 const tabsAppender = (selector) => {
@@ -23,6 +45,11 @@ 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.
   //
+  axios.get(URL)
+    .then(res => {
+      const topics = document.querySelector(selector);
+  topics.append(Tabs(res.data.topics));
+    })
 }
 
 export { Tabs, tabsAppender }