Nadia childs

components/Cards/index.js

@@ -17,3 +17,74 @@
 // </div>
 //
 // Create a card for each of the articles and add the card to the DOM.
+const cards = document.querySelector('.cards-container');
+ function cardCreator(e) {
+    const card = document.createElement('div');
+   card.classList.add('card');
+   const headline = document.createElement('div');
+   headline.classList.add('headline');
+   headline.textContent = e.headline;
+   card.appendChild(headline);
+   const author = document.createElement('div'); 
+   author.classList.add('author');
+
+   card.appendChild(author);
+
+   const imageContainer = document.createElement('div');
+   imageContainer.classList.add('img-container');
+   author.appendChild(imageContainer);
+
+   const image = document.createElement('img');
+   image.src = e.authorPhoto;
+   imageContainer.appendChild(image);
+
+   const span = document.createElement('span');
+   author.appendChild(span);
+   span.textContent = `By ${e.authorName}`
+   cards.appendChild(card);
+   return card;  
+
+
+ }
+
+
+
+
+axios.get('https://lambda-times-backend.herokuapp.com/articles')
+.then((response) => {
+    console.log(response.data.articles)
+    let bootstrap = response.data.articles.bootstrap;
+    let javascript = response.data.articles.javascript;
+    let jquery = response.data.articles.jquery;
+    let node = response.data.articles.node;
+    let technology = response.data.articles.technology;
+
+   bootstrap.forEach ( i => {
+       const card =  cardCreator(i);
+    cards.appendChild(card);
+})
+javascript.forEach ( i => {
+    const card =  cardCreator(i);
+    cards.appendChild(card);
+})
+jquery.forEach ( i => {
+    const card =  cardCreator(i);
+    cards.appendChild(card);
+})
+node.forEach ( i => {
+    const card =  cardCreator(i);
+    cards.appendChild(card);
+})
+    technology.forEach ( i => {
+        const card =  cardCreator(i);
+        cards.appendChild(card);
+    })
+
+
+})
+.catch((err) => {
+
+console.log(err);
+});
+
+

components/Header/index.js

@@ -1,3 +1,4 @@
+
 // STEP 1: Create a header component.
 // -----------------------
 // Using a function create the component you see below:
@@ -7,6 +8,31 @@
 //    <h1>Lambda Times</h1>
 //    <span class="temp">98°</span>
 //  </div >
-// And add it to the DOM in the .headerContainer component
+// And add it to the DOM in the .header-container component
+
+function componentCreator () {  //name function
+    let head = document.createElement('div')   //create "primary" element that 
+    let spanEL = document.createElement('span');  // create other needed elements
+    let h1 = document.createElement('h1')
+    let spanEl2 = document.createElement('span');
+    head.appendChild(spanEL);  // begin adding other elements to "primary element" using appendChild
+    head.appendChild(h1);  
+    head.appendChild(spanEl2);
+    head.classList.add('header');  // adding class names
+    spanEL.classList.add('date');  
+    spanEl2.classList.add('temp');
 
-function Header() {}
+    h1.textContent = "Lambda Times";  // add text content
+    spanEL.textContent = "SMARCH 28, 2019"
+    spanEl2.textContent = "98°";
+
+    return head;   // return primary element
+
+}
+
+
+const button = componentCreator(); //call component creator function and set result equal to variable
+
+let container = document.querySelector('.header-container') // grab container
+
+container.appendChild(button); //append variable containing result of called function to container elment grabbed on previous line 

components/Tabs/index.js

@@ -7,3 +7,39 @@
 //
 //  The tab component should look like this:
 //    <div class="tab">topic here</div>
+
+
+    // const tabs = document.querySelector('.topics')
+
+    // response.tabs.forEach(item => {
+    //     const tab = document.createElement('div');
+    //     tab.classList.add('tab')
+    //     tab.textContent = topic;
+
+
+
+    function axiosFun (topic) {
+        const nTab = document.createElement('div');
+        nTab.classList.add('tab')
+        nTab.textContent = topic;
+
+        return nTab
+
+    }
+
+
+
+    topics = document.querySelector('.topics');
+
+    axios
+    .get('https://lambda-times-backend.herokuapp.com/topics')
+    .then(response => {
+        response.data.topics.forEach(topic => {
+            const tab = axiosFun(topic);
+            topics.appendChild(tab);
+        })
+        .catch(error => {
+            console.log("There was an error")
+        })
+    })
+