Suparada saitalae

README.md

@@ -40,22 +40,22 @@ Edit this document to include your answers after each question. Make sure to lea
 
 ### Git Set up
 
-* [ ] Fork the project into your GitHub user account
-* [ ] Clone the forked project into a directory on your machine
-* [ ] Create a pull request before you start working on the project requirements.  You will continuously push your updates throughout the project.
-* [ ] You are now ready to build this project with your preferred IDE
+* [x] Fork the project into your GitHub user account
+* [x] Clone the forked project into a directory on your machine
+* [x] Create a pull request before you start working on the project requirements.  You will continuously push your updates throughout the project.
+* [x] You are now ready to build this project with your preferred IDE
 
 ## Minimum Viable Product
 
 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.
+* [x] Following the instructions in the `Tabs/index.js` file, create individual Tabs components.
 
-* [ ] Following the instructions in the `Cards/index.js` file, create individual Cards components.
+* [x] Following the instructions in the `Cards/index.js` file, create individual Cards components.
 
 ## Stretch Problems
 

components/Cards/index.js

@@ -17,3 +17,67 @@
 // </div>
 //
 // Create a card for each of the articles and add the card to the DOM.
+
+const cardContainer = document.querySelector('.cards-container') 
+
+axios.get(`https://lambda-times-backend.herokuapp.com/articles`)
+.then(data => {
+    const bootstrap = data.data.articles.bootstrap
+    bootstrap.forEach(item => {
+        const card = createArticle(item)
+        cardContainer.appendChild(card)
+    })
+    const javascript = data.data.articles.javascript
+    javascript.forEach(item => {
+        const card = createArticle(item)
+        cardContainer.appendChild(card)
+    })
+    const jquery = data.data.articles.jquery
+    jquery.forEach(item => {
+        const card = createArticle(item)
+        cardContainer.appendChild(card)
+    })
+    const nodejs = data.data.articles.node
+    nodejs.forEach(item => {
+        const card = createArticle(item)
+        cardContainer.appendChild(card)
+    })
+
+
+    console.log('5555', bootstrap)
+    console.log('it is working', data)
+})
+.catch(error => {
+    console.log('The Article API is currently down, try again later', error)
+})
+
+
+
+function createArticle(item) {
+    const card = document.createElement('div')
+    const headline = document.createElement('div')
+    const author = document.createElement('div')
+    const imgContainer = document.createElement('div')
+    const img = document.createElement('img')
+    const authorsName = document.createElement('span')
+
+
+    card.classList.add('card')
+    headline.classList.add('headline')
+    author.classList.add('author')
+    imgContainer.classList.add('img-container')
+
+    headline.textContent = item.headline
+    img.src = item.authorPhoto
+    authorsName.textContent = `'By: ' ${item.authorName}`
+
+    card.appendChild(headline)
+    card.appendChild(author)
+    author.appendChild(imgContainer)
+    imgContainer.appendChild(img)
+    author.appendChild(authorsName)
+
+    return card
+
+}
+

components/Header/index.js

@@ -9,4 +9,25 @@
 //  </div >
 // And add it to the DOM in the .headerContainer component
 
-function Header() {}
+function headerFunction() {
+    const header = document.createElement('div')
+    const date = document.createElement('span')
+    const h1Lambda = document.createElement('h1')
+    const temp = document.createElement('span')
+
+    header.classList.add('header')
+    date.classList.add('date')
+    h1Lambda.textContent = 'Lambda Time'
+    temp.textContent = '98°'
+
+    header.appendChild(date)
+    header.appendChild(h1Lambda)
+    header.appendChild(temp)
+
+    return header
+}
+
+const headerComponent = headerFunction()
+const headerContainer = document.querySelector('.header-container')
+
+headerContainer.parentNode.insertBefore(headerComponent, headerContainer.nextSibling)

components/Tabs/index.js

@@ -7,3 +7,34 @@
 //
 //  The tab component should look like this:
 //    <div class="tab">topic here</div>
+
+
+const topicsEle = document.querySelector('.topics')
+
+axios.get(`https://lambda-times-backend.herokuapp.com/topics`)
+.then(data => {
+    console.log('yay',data)
+
+    const topicData = data.data.topics
+    topicData.forEach(topic => { 
+        const topicTab = new Tab(topic)
+        topicsEle.appendChild(topicTab)
+        console.log(topic)
+    })
+})
+.catch(erreor => {
+    console.log('The API is currently down, try again later', error)
+})
+
+            //come from topic
+function Tab(tabText){
+    const tabComponent = document.createElement('div')
+
+    tabComponent.classList.add('tab')
+
+    tabComponent.textContent = tabText
+
+    return tabComponent
+
+}
+