finished requirements

components/Article.js

@@ -86,7 +86,7 @@ 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.`
-  }
+  },
 ];
 
 /*
@@ -114,3 +114,62 @@ 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.
 */
+
+//Step 1
+
+const articles = document.querySelector('.articles')
+
+function articleMaker(obj) {
+
+//instantiate elements needed for article
+
+const article = document.createElement('div');
+const articleTitle = document.createElement('h2');
+const articleDate = document.createElement('p');
+const firstParagraph = document.createElement('p');
+const secondParagraph = document.createElement('p');
+const thirdParagraph = document.createElement('p');
+const span = document.createElement('span');
+
+// set up the structure of our elements 
+
+article.appendChild(articleTitle);
+article.appendChild(articleDate);
+article.appendChild(firstParagraph);
+article.appendChild(secondParagraph);
+article.appendChild(thirdParagraph);
+article.appendChild(span);
+
+//add classnames to our elements
+article.classList.add('article');
+articleTitle.classList.add('h2');
+articleDate.classList.add('date');
+span.classList.add('expandButton');
+
+//set text content using obj
+
+articleTitle.textContent = obj.title;
+articleDate.textContent = obj.date;
+firstParagraph.textContent = obj.firstParagraph;
+secondParagraph.textContent = obj.secondParagraph;
+thirdParagraph.textContent = obj.thirdParagraph;
+span.textContent = 'Expand Article'
+
+//Open or close article
+span.addEventListener('click', () => {
+  article.classList.toggle('article-open')
+
+})
+
+
+return article
+}
+
+const articleElements = data.map(data => {
+  return articleMaker(data)
+});
+
+articleElements.forEach(elem => {
+  articles.appendChild(elem);
+})
+

components/Menu.js

@@ -1,5 +1,7 @@
 // This is the data we will be using, study it but don't change anything, yet.
 
+// const { Linter } = require("eslint");
+
 let menuItems = [
   'Students',
   'Faculty',
@@ -31,3 +33,40 @@ let menuItems = [
 
   Step 6: Use 'menuMaker' to create a menu using the 'menuItems' array, and append the returned menu to the header.
 */
+
+
+function menuMaker(arr = []) {
+  console.log(arr)
+
+  //instantiate elements needed for menu
+  const menu = document.createElement('div');
+  const menuItems = document.createElement('ul');
+
+//
+arr.forEach(item => {
+  const li = document.createElement('li');
+  li.textContent = item;
+  menuItems.appendChild(li);
+});
+
+//set up structure of elements
+  menu.appendChild(menuItems);
+
+//add appropriate styles to elements
+
+menuItems.classList.add('menu');
+
+//get menu button from DOM
+const menuButton = document.querySelector('.menu-button');
+menuButton.appendChild(menu)
+
+menuButton.addEventListener('click', () => {
+  menuItems.classList.toggle('menu--open')
+})
+
+return menu
+}
+
+const newMenu = menuMaker(menuItems)
+const header = document.querySelector('.header');
+header.appendChild(newMenu);