Completed project

components/Article.js

@@ -86,7 +86,26 @@ const data = [
     thirdParagraph: `Hodor hodor - hodor... Hodor hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor hodor hodor hodor hodor; hodor hodor? Hodor!
           Hodor hodor, HODOR hodor, hodor hodor?! Hodor! Hodor hodor, HODOR hodor, hodor hodor, hodor, hodor hodor. Hodor, hodor.
           Hodor. Hodor, hodor, hodor. Hodor hodor... Hodor hodor hodor?! Hodor, hodor... Hodor hodor HODOR hodor, hodor hodor. Hodor.`
-  }
+  },   
+  {
+    title: 'My Own Article',
+    date: 'Dec First 2021',
+    firstParagraph: `This is my first paragraph`,
+
+    secondParagraph: `This is my second paragraph `,
+
+    thirdParagraph: `And this is my third paragraph`,
+  }  
+  ,   
+  {
+    title: 'My Second Article',
+    date: 'Dec First 2021',
+    firstParagraph: `This is my first paragraph in the second article`,
+
+    secondParagraph: `This is my second paragraph in the second article`,
+
+    thirdParagraph: `And this is my third paragraph in the second article`,
+  }  
 ];
 
 /*
@@ -114,3 +133,49 @@ const data = [
   Step 5: Try adding new article object to the data array. Make sure it is in the same format as the others.
   Refresh the page to see the new article.
 */
+
+function articleMaker (articleObj)  {
+      let div = document.createElement('div');
+      div.classList ="article"    
+
+      let title = document.createElement('h2');
+      title.textContent = articleObj.title;
+
+      let date = document.createElement('p');
+      date.classlist =  "date";
+      date.textContent = articleObj.date;
+
+      let firstParagraph = document.createElement('p')
+      firstParagraph.textContent = articleObj.firstParagraph;
+
+      let secondParagraph = document.createElement('p')
+      secondParagraph.textContent = articleObj.secondParagraph;
+
+      let thirdParagraph = document.createElement('p')
+      thirdParagraph.textContent = articleObj.thirdParagraph; 
+
+      let button = document.createElement('span')
+      button.textContent = "+";
+      button.classList = "expandButton";
+
+      button.addEventListener('click',()=>{
+        div.classList.toggle("article-open");
+      });
+
+
+      div.appendChild(title);
+      div.appendChild(date);
+      div.appendChild(firstParagraph);
+      div.appendChild(secondParagraph);
+      div.appendChild(thirdParagraph);
+      div.appendChild(button);
+      return div      
+}
+
+let articles = document.querySelector(".articles")
+data.forEach((e)=> {
+    articles.appendChild(articleMaker(e));
+});
+
+
+

components/Menu.js

@@ -7,7 +7,7 @@ let menuItems = [
   'Tech Trends',
   'Music',
   'Log Out'
-];
+]
 
 /* 
   Step 1: Write a component called 'menuMaker' to create a menu like the markup below:
@@ -31,3 +31,30 @@ let menuItems = [
 
   Step 6: Use 'menuMaker' to create a menu using the 'menuItems' array, and append the returned menu to the header.
 */
+
+function menuMaker (array) {
+  let div = document.createElement('div'); //creates div with menu class to hold "ul"
+  div.classList = "menu"
+
+  let ul = document.createElement('ul') //creates ul to hold "li" items
+  div.appendChild(ul)
+
+  array.forEach( (item) => {            // generates an li element and assigns each menu item to each new element. then appends each li element to above "ul"
+    let li = document.createElement("li");
+    li.textContent= item; 
+    ul.appendChild(li)
+  })
+
+  let menuButton = document.querySelector(".menu-button")   //toggles "menu--open" class when the menu buton is clicked.
+  menuButton.addEventListener('click', ()=>{
+    div.classList.toggle("menu--open")  
+  })
+  return div;
+}
+
+let header = document.querySelector(".header");    
+let newMenu = menuMaker(menuItems);
+
+header.appendChild(newMenu);
+
+