diff --git a/.idea/Sprint-Challenge-Applied-JavaScript-v2.iml b/.idea/Sprint-Challenge-Applied-JavaScript-v2.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/Sprint-Challenge-Applied-JavaScript-v2.iml
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/dictionaries/lisa.xml b/.idea/dictionaries/lisa.xml
new file mode 100644
index 0000000..c4d2c93
--- /dev/null
+++ b/.idea/dictionaries/lisa.xml
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/.idea/markdown-navigator.xml b/.idea/markdown-navigator.xml
new file mode 100644
index 0000000..6b82ce2
--- /dev/null
+++ b/.idea/markdown-navigator.xml
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/markdown-navigator/profiles_settings.xml b/.idea/markdown-navigator/profiles_settings.xml
new file mode 100644
index 0000000..db06266
--- /dev/null
+++ b/.idea/markdown-navigator/profiles_settings.xml
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..4244416
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+ JavaScript
+
+
+
+
+ Probable bugsJavaScript
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..9b15b67
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..adbc3b9
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,320 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1562943672018
+
+
+ 1562943672018
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/README.md b/README.md
index 9ff48dd..eb40251 100644
--- a/README.md
+++ b/README.md
@@ -29,29 +29,35 @@ 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 the browser's interpretation of your code. You can manipulate the interpretation with Javascript to enhance your site without having to change the HTML or CSS directly.
2. What is an event?
+ An event is when some type of interaction occurs, like a mouse click or key press.
3. What is an event listener?
+ An event listener specifies what type of event to be on the lookout for, and what to do when the event happens.
4. Why would we convert a NodeList into an Array?
+ You would convert the NodeList to allow access to array methods.
5. What is a component?
+ A component is an inclusive segment of code, usually classes and methods that is reusable and creates a specific component for your website, like carousels and cards.
+
### 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.
diff --git a/components/Cards/index.js b/components/Cards/index.js
index 1482e60..cc2dbb8 100644
--- a/components/Cards/index.js
+++ b/components/Cards/index.js
@@ -17,3 +17,62 @@
//
//
// Create a card for each of the articles and add the card to the DOM.
+
+// Select main node
+const cardsContainer = document.querySelector('.cards-container');
+
+axios.get(`https://lambda-times-backend.herokuapp.com/articles`)
+ .then(data => {
+ // test response
+ console.log('response', data);
+
+ // hold received data
+ const articleData = data.data.articles; // data is stored in an object
+
+ //create an array to hold object data
+ const articleArray = Object.values(articleData);
+ //nest forEach to assign object values from data
+ articleArray.forEach(articleData => {
+ // create new article
+ articleData.forEach(element => {
+ let newArticle = createCard(element);
+ cardsContainer.appendChild(newArticle);
+ })
+ })
+})
+
+ .catch(error => {
+ // test response
+ console.log('Error retrieving card data', error)
+ });
+
+function createCard(object) {
+
+ // Define elements
+ const card = document.createElement('div');
+ const headline = document.createElement('div');
+ const authorContent = document.createElement('div');
+ const imgContainer = document.createElement('div');
+ const cardImg = document.createElement('img');
+ const credit = document.createElement('span');
+
+ // Setup structure
+ card.appendChild(headline);
+ card.appendChild(authorContent);
+ authorContent.appendChild(imgContainer);
+ imgContainer.appendChild(cardImg);
+ imgContainer.appendChild(credit);
+
+ // Set class names
+ card.classList.add('card');
+ authorContent.classList.add('author');
+ headline.classList.add('headline');
+ imgContainer.classList.add('img-container');
+
+ // Set content
+ headline.textContent = object.headline;
+ cardImg.src = object.authorPhoto;
+ credit.textContent = object.authorName;
+
+ return card;
+}
diff --git a/components/Header/index.js b/components/Header/index.js
index c41ba8c..2e95a72 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -3,10 +3,38 @@
// Using a function create the component you see below:
//
//
-// SMARCH 28, 2019
+// MARCH 28, 2019
//
Lambda Times
// 98°
//
// And add it to the DOM in the .headerContainer component
-function Header() {}
+function Header() {
+
+ // Define elements
+ const header = document.createElement('div');
+ const date = document.createElement('span');
+ const title = document.createElement('h1');
+ const temp = document.createElement('span');
+
+ // Setup structure
+ header.appendChild(date);
+ header.appendChild(title);
+ header.appendChild(temp);
+
+ // Set class names
+ header.classList.add('header');
+ date.classList.add('date');
+ temp.classList.add('temp');
+
+
+ // Set content
+ date.textContent = `MARCH 28, 2019`;
+ title.textContent = `Lambda Times`;
+ temp.textContent = `98°`;
+
+return header;
+
+}
+const headerContainer = document.querySelector('.header-container');
+headerContainer.appendChild(Header());
diff --git a/components/Tabs/index.js b/components/Tabs/index.js
index 5215a3d..01def5e 100644
--- a/components/Tabs/index.js
+++ b/components/Tabs/index.js
@@ -7,3 +7,43 @@
//
// The tab component should look like this:
//
topic here
+const topics = document.querySelector('.topics');
+
+axios.get(`https://lambda-times-backend.herokuapp.com/topics`)
+ .then(data => {
+
+ // Test response
+ console.log('response', data);
+
+ // hold received data
+ const tabTopic = data.data.topics;
+
+ tabTopic.forEach(element => {
+ let newTab = createTabs(element);
+ topics.appendChild(newTab);
+ })
+
+ .catch(error => {
+ console.log('Error when retrieving data', error)
+ });
+
+ function createTabs(object) {
+
+ // Define elements
+ const tab = document.createElement('div');
+
+ // Setup structure -> unnecessary
+
+ // Set class names
+ tab.classList.add('tab');
+
+
+ // Set content
+ tab.textContent = object;
+
+ return tab;
+ }
+
+ });
+
+