test-upload

README.md

@@ -49,9 +49,9 @@ Edit this document to include your answers after each question. Make sure to lea
 
 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.
+* [x] 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. 
+* [x] 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,51 @@
 // </div>
 //
 // Create a card for each of the articles and add the card to the DOM.
+
+const cardsContainer = document.querySelector('.cards-container');
+
+axios.get('https://lambda-times-backend.herokuapp.com/articles')
+  .then(x => {
+    articlesByTopic = x.data.articles;
+    topicsCom(articlesByTopic);
+  })
+
+  .catch(error => {
+    console.log('There is an error in your Cards/index.js file', error)
+  })
+
+
+function topicsCom(objectArticlesByTopic) {
+
+  Object.keys(objectArticlesByTopic).forEach(topic => {
+    let articles = objectArticlesByTopic[topic];
+    articles.forEach(article => cardsContainer.append(cardComponent(article, topic)));
+  })
+}
+
+function cardComponent(articleObj, topic) {
+  const card = document.createElement('div'),
+    headline = document.createElement('div'),
+    author = document.createElement('div'),
+    imgContainer = document.createElement('div'),
+    imgSrc = document.createElement('img'),
+    authorName = document.createElement('span');
+
+
+  headline.textContent = articleObj.headline;
+  imgSrc.src = articleObj.authorPhoto;
+  authorName.textContent = articleObj.authorName;
+
+  card.append(author);
+  card.append(headline);
+  author.append(authorName);
+  author.append(imgContainer);
+  imgContainer.append(imgSrc);
+
+  card.classList.add('card');
+  headline.classList.add('headline');
+  author.classList.add('author');
+  imgContainer.classList.add('img-container');
+
+  return card;
+}

components/Header/index.js

@@ -7,6 +7,37 @@
 //    <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 Header() {}
+function Header() {
+
+//define new elements
+const head = document.createElement('div');
+const date = document.createElement('span');
+const headingOne = document.createElement('h1');
+const temperature = document.createElement('span');
+
+//setup structure of elements
+head.appendChild(date)
+head.appendChild(headingOne)
+head.appendChild(temperature)
+
+//set class names
+head.classList.add('header');
+date.classList.add('date');
+headingOne.classList.add('h1');
+temperature.classList.add('temp');
+
+//set text content
+date.textContent = "MARCH 28";
+headingOne.textContent = "Lambda Times";
+temperature.textContent = "95%";
+
+
+return head;
+}
+
+const project = document.querySelector('.header-container');
+console.log(project)
+
+project.appendChild(Header());

components/Tabs/index.js

@@ -7,3 +7,27 @@
 //
 //  The tab component should look like this:
 //    <div class="tab">topic here</div>
+
+
+let a = document.querySelector(".tabs");
+console.log(a);
+
+axios.get("https://lambda-times-backend.herokuapp.com/topics")
+.then (x => {
+
+   x.data.topics.forEach(to => { a.appendChild(Tabtab(to))}) 
+    //createCards(data)
+    //console.log(data)
+    })
+
+.catch (data => {console.log(data)})
+
+function Tabtab(headingTitle){
+   // console.log(headingTitle)
+const tabsTabs = document.createElement('div');
+
+tabsTabs.textContent = `${headingTitle}`;
+tabsTabs.classList.add('tab'); 
+
+return tabsTabs
+}