John schneider

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -30,41 +30,51 @@ Edit this document to include your answers after each question. Make sure to lea
 
 1. What is the DOM?
 
+Document object model, it's the translator between the code and the website
+
 2. What is an event?
 
+and event is anything that transpires on a page, click,key,scroll etc..
+
 3. What is an event listener?
 
+gives us the ability to monitor events as defined above
+
 4. Why would we convert a NodeList into an Array?
 
+nodelist only gives you the foreach, converting it to array gives you a vast amount of array methods
+
 5. What is a component?
 
+a component is a reuabale piece of javascript that can be uses in a plug an play fashion, houseing functions.
+
 ### 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
+- [ ] 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
 
 ## 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.
+- [ ] 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.
+- [ ] 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.
+- [ ] Following the instructions in the `Cards/index.js` file, create individual Cards components.
 
 ## Stretch Problems
 
 Your stretch challenge is to write the functionality of a `Carousel` component. This is an advanced challenge, so you are not expected to be able to complete it. If you begin and don't finish, you should still submit with what you have. This is going to be a bit different because you are going to need to create some advanced functionality for the carousel. There is no need to request data for this exercise.
 
-* [ ] Complete the carousel functionality in `Carousel.js`
+- [ ] Complete the carousel functionality in `Carousel.js`
 
-* [ ] If you complete the Carousel, add functionality so that the carousel slides when the buttons are pressed instead of just appearing.
+- [ ] If you complete the Carousel, add functionality so that the carousel slides when the buttons are pressed instead of just appearing.
 
-* [ ] Create an 'infinite loop' carousel. In which as long as you click on an arrow, the array of images will loop over itself.
+- [ ] Create an 'infinite loop' carousel. In which as long as you click on an arrow, the array of images will loop over itself.
 
-* [ ] If you have finished the above, research `data attributes`. Implement data attributes within your tabs as well as your cards. Give the tabs functionality so that when they are clicked they filter the cards to only display the cards that contain that topic.
+- [ ] If you have finished the above, research `data attributes`. Implement data attributes within your tabs as well as your cards. Give the tabs functionality so that when they are clicked they filter the cards to only display the cards that contain that topic.

components/Cards/index.js

@@ -17,3 +17,50 @@
 // </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(res => {
+  lambdaContent = res.data.articles;
+  const test = "bootstrap";
+  console.log("test me", lambdaContent[test]);
+  const titles = Object.keys(lambdaContent);
+  console.log("hello", titles);
+
+  titles.forEach(title => {
+    lambdaContent[title].forEach(article => {
+      const newArticle = createArticle(article);
+      cardsContainer.appendChild(newArticle);
+    });
+  });
+});
+
+function createArticle(info) {
+  // Add Elements
+  const card = document.createElement("div");
+  const cardHead = document.createElement("div");
+  const cardAuthor = document.createElement("div");
+  const cardImgBox = document.createElement("div");
+  const cardImg = document.createElement("img");
+  const cardSign = document.createElement("span");
+
+  // Add Classes
+  card.classList.add("card");
+  cardHead.classList.add("headline");
+  cardAuthor.classList.add("author");
+  cardImgBox.classList.add("img-container");
+
+  // Add Content
+  cardHead.textContent = info.headline;
+  cardAuthor.textContent = info.authorPhoto;
+  cardSign.textContent = info.authorName;
+
+  // Append
+  card.appendChild(cardHead);
+  card.appendChild(cardAuthor);
+  cardAuthor.appendChild(cardImgBox);
+  cardAuthor.appendChild(cardSign);
+  cardImgBox.appendChild(cardImg);
+
+  return card;
+}

components/Header/index.js

@@ -9,4 +9,30 @@
 //  </div >
 // And add it to the DOM in the .headerContainer component
 
-function Header() {}
+function Header() {
+  // Add Elements
+  const header = document.createElement("div");
+  const date = document.createElement("span");
+  const head = document.createElement("h1");
+  const temp = document.createElement("span");
+
+  // Add Classes
+  head.classList.add("header");
+  date.classList.add("date");
+  temp.classList.add("temp");
+
+  // Add Content
+  date.textContent = "SMarch 28. 2019";
+  head.textContent = "Lambda Times";
+  temp.textContent = "98°";
+
+  // Append
+  header.appendChild(date);
+  header.appendChild(head);
+  header.appendChild(temp);
+
+  return header;
+}
+
+const headerContainer = document.querySelector(".header-container");
+headerContainer.appendChild(Header());

components/Tabs/index.js

@@ -7,3 +7,32 @@
 //
 //  The tab component should look like this:
 //    <div class="tab">topic here</div>
+
+const topicBox = document.querySelector(".topics");
+
+axios
+  .get("https://lambda-times-backend.herokuapp.com/topics")
+  .then(res => {
+    const dataDrop = res.data.topics;
+
+    dataDrop.forEach(item => {
+      const newTab = tab(item);
+      topicBox.appendChild(newTab);
+    });
+  })
+  .catch(err => {
+    console.log("oh noes...", err);
+  });
+
+function tab(info) {
+  // Add Elements
+  const tabTopic = document.createElement("div");
+
+  // Add Classes
+  tabTopic.classList.add("tab");
+
+  // Add Content
+  tabTopic.textContent = info;
+
+  return tabTopic;
+}