From 82be4939c2901eb419d026803d7333522ac13627 Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Fri, 12 Jul 2019 11:22:39 -0400 Subject: [PATCH 1/6] Render Header Component --- components/Header/index.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/components/Header/index.js b/components/Header/index.js index c41ba8c..3fa4a6f 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -9,4 +9,29 @@ // // And add it to the DOM in the .headerContainer component -function Header() {} +const container = document.querySelector('.header-container') +const headerComponent = Header(); +container.appendChild(headerComponent) + +function Header() { + + const header = document.createElement('div'); + header.classList.add('header'); + + const date = document.createElement('span'); + date.classList.add('date'); + date.textContent = "SMARCH 28, 2019"; + + const title = document.createElement('h1'); + title.textContent = "Lambda Times"; + + const temp = document.createElement('span'); + temp.classList.add('temp'); + temp.textContent = "98"; + + header.appendChild(date); + header.appendChild(title); + header.appendChild(temp); + + return header; +} From d73514b233d1a39df949bf97a9155d1132b3faf9 Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Fri, 12 Jul 2019 12:36:16 -0400 Subject: [PATCH 2/6] Finished building component --- components/Cards/index.js | 49 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/components/Cards/index.js b/components/Cards/index.js index 1482e60..30b053e 100644 --- a/components/Cards/index.js +++ b/components/Cards/index.js @@ -17,3 +17,52 @@ // // // Create a card for each of the articles and add the card to the DOM. + +const topics = [ + "javascript", + "bootstrap", + "jquery", + "node", + "technology" +] + +topics.forEach(topic => + axios.get(`https://lambda-times-backend.herokuapp.com/articles`) + .then(res => { + console.log(res.data.topic) + const tabs = document.querySelector('.topics') + const cards = cardCreator(res.data) + tabs.appendChild(cards) + }) +) + + + +function cardCreator(article){ + const card = document.createElement('div'); + card.classList.add('card'); + + const headline = document.createElement('div'); + headline.classList.add('headline'); + headline.textContent = article.headline + + const author = document.createElement('div'); + author.classList.add('author'); + + const imgContainer = document.createElement('div'); + imgContainer.classList.add('img-container'); + + const image = document.createElement('img'); + image.setAttribute('src', article.authorPhoto); + + const credit = document.createElement('span'); + credit.textContent = `By: ${article.authorName}` + + card.appendChild(headline); + card.appendChild(author); + author.appendChild(imgContainer); + imgContainer.appendChild(image); + author.appendChild(credit); + + return card +} From ec9b45f591031a6489d03a73912e90de7d621252 Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Fri, 12 Jul 2019 15:57:05 -0400 Subject: [PATCH 3/6] Render Cards --- components/Cards/index.js | 53 +++++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/components/Cards/index.js b/components/Cards/index.js index 30b053e..95017bf 100644 --- a/components/Cards/index.js +++ b/components/Cards/index.js @@ -18,33 +18,31 @@ // // Create a card for each of the articles and add the card to the DOM. -const topics = [ - "javascript", - "bootstrap", - "jquery", - "node", - "technology" -] -topics.forEach(topic => - axios.get(`https://lambda-times-backend.herokuapp.com/articles`) + axios.get('https://lambda-times-backend.herokuapp.com/articles') .then(res => { - console.log(res.data.topic) - const tabs = document.querySelector('.topics') - const cards = cardCreator(res.data) - tabs.appendChild(cards) + console.log(res.data.articles) + const cardHome = document.querySelector('.title') + const javascript = cardCreator(res.data.articles.javascript) + const bootstrap = cardCreator(res.data.articles.bootstrap) + const node = cardCreator(res.data.articles.node) + const tech = cardCreator(res.data.articles.technology) + const jquery = cardCreator(res.data.articles.jquery) + cardHome.append(javascript, bootstrap, node, tech, jquery) }) -) - + .catch(err => console.log(err)) function cardCreator(article){ const card = document.createElement('div'); card.classList.add('card'); - const headline = document.createElement('div'); - headline.classList.add('headline'); - headline.textContent = article.headline + article.forEach(item => { + const header = document.createElement('h3') + header.classList.add('headline') + header.textContent = item.headline + card.appendChild(header) + }) const author = document.createElement('div'); author.classList.add('author'); @@ -52,17 +50,22 @@ function cardCreator(article){ const imgContainer = document.createElement('div'); imgContainer.classList.add('img-container'); - const image = document.createElement('img'); - image.setAttribute('src', article.authorPhoto); + article.forEach(item => { + const authorImage = document.createElement('img') + authorImage.setAttribute('src', item.authorPhoto) + imgContainer.appendChild(authorImage) + }); + + article.forEach(item => { + const credit = document.createElement('span'); + credit.textContent = `By: ${item.authorName}` + author.appendChild(credit); + }); - const credit = document.createElement('span'); - credit.textContent = `By: ${article.authorName}` - card.appendChild(headline); card.appendChild(author); author.appendChild(imgContainer); - imgContainer.appendChild(image); - author.appendChild(credit); + return card } From da3b649f11c58b9109fc04892527052ce8301c2b Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Fri, 12 Jul 2019 16:21:13 -0400 Subject: [PATCH 4/6] Complete study questions --- README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 9ff48dd..47707d4 100644 --- a/README.md +++ b/README.md @@ -29,15 +29,17 @@ Demonstrate your understanding of this week's concepts by answering the followin Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager 1. What is the DOM? - +The DOM is a representation of an HTML document that takes the form of a tree and turns +each part of the document into a node object. 2. What is an event? - +An event is any user interaction with the web page. 3. What is an event listener? - +An event listener is a function that executes a callback when an event occurs. 4. Why would we convert a NodeList into an Array? - +So that we can use more advanced array methods like Map or Filter. 5. What is a component? - +A component is a basic template for elements so that multiple elements of a similar type can +be created using less code. ### Git Set up * [ ] Fork the project into your GitHub user account @@ -51,7 +53,7 @@ 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. -* [ ] Following the instructions in the `Header/index.js` file, create the Header component. +* [ ] 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. From c4e884000cba8f80a7da1bcb8ef90bb36e5cae72 Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Fri, 12 Jul 2019 16:38:36 -0400 Subject: [PATCH 5/6] tabs complete --- components/Tabs/index.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/components/Tabs/index.js b/components/Tabs/index.js index 5215a3d..1a5062f 100644 --- a/components/Tabs/index.js +++ b/components/Tabs/index.js @@ -7,3 +7,23 @@ // // The tab component should look like this: //
topic here
+ + +axios.get('https://lambda-times-backend.herokuapp.com/topics') + .then(res => { console.log(res.data) + const trending = document.querySelector('.topics'); + const tabs = tabCreator(res.data); + trending.appendChild(tabs); + }) + .catch(err => console.log(err)) + + +function tabCreator(topic) { + + const tab = document.createElement('div') + tab.classList.add('tab') + tab.textContent = topic.topics + + return tab + +} From 769544eac30a6d92e11eb4fa82e1f59f40b47cca Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Sat, 13 Jul 2019 09:51:26 -0400 Subject: [PATCH 6/6] Re-factor Cards --- components/Cards/index.js | 69 +++++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 28 deletions(-) diff --git a/components/Cards/index.js b/components/Cards/index.js index 95017bf..190b5f5 100644 --- a/components/Cards/index.js +++ b/components/Cards/index.js @@ -21,51 +21,64 @@ axios.get('https://lambda-times-backend.herokuapp.com/articles') .then(res => { - console.log(res.data.articles) - const cardHome = document.querySelector('.title') - const javascript = cardCreator(res.data.articles.javascript) - const bootstrap = cardCreator(res.data.articles.bootstrap) - const node = cardCreator(res.data.articles.node) - const tech = cardCreator(res.data.articles.technology) - const jquery = cardCreator(res.data.articles.jquery) - cardHome.append(javascript, bootstrap, node, tech, jquery) + console.log(res.data) + const cardHome = document.querySelector('.cards-container') + const javascript = res.data.articles.javascript + javascript.forEach(item => { + const java = cardCreator(item) + cardHome.append(java) + }) + const bootstrap = res.data.articles.bootstrap + bootstrap.forEach(item => { + const boot = cardCreator(item) + cardHome.append(boot) + }) + const jquery = res.data.articles.jquery + jquery.forEach(item => { + const j = cardCreator(item) + cardHome.append(j) + }) + const technology = res.data.articles.technology + technology.forEach(item => { + const tech = cardCreator(item) + cardHome.append(tech) + }) + const node = res.data.articles.node + node.forEach(item => { + const nodeCard = cardCreator(item) + cardHome.append(nodeCard) + }) }) .catch(err => console.log(err)) function cardCreator(article){ + const card = document.createElement('div'); card.classList.add('card'); - article.forEach(item => { + const header = document.createElement('h3') header.classList.add('headline') - header.textContent = item.headline + header.textContent = article.headline card.appendChild(header) - }) - const author = document.createElement('div'); - author.classList.add('author'); + const author = document.createElement('div'); + author.classList.add('author'); + card.appendChild(author); - const imgContainer = document.createElement('div'); - imgContainer.classList.add('img-container'); + const imgContainer = document.createElement('div'); + imgContainer.classList.add('img-container'); + author.appendChild(imgContainer); - article.forEach(item => { - const authorImage = document.createElement('img') - authorImage.setAttribute('src', item.authorPhoto) - imgContainer.appendChild(authorImage) - }); + const authorImage = document.createElement('img') + authorImage.setAttribute('src', article.authorPhoto) + imgContainer.appendChild(authorImage) - article.forEach(item => { const credit = document.createElement('span'); - credit.textContent = `By: ${item.authorName}` + credit.textContent = `By: ${article.authorName}` author.appendChild(credit); - }); - - - card.appendChild(author); - author.appendChild(imgContainer); + return card - return card }