added project

README.md

@@ -6,19 +6,19 @@ In this project we are going to be building a news feed reader. The goal is to h
 
 ## Git Setup
 
-* [ ] Create a forked copy of this project.
-* [ ] Clone your OWN version of the repository.
-* [ ] Implement the project on the main branch, committing changes regularly.
-* [ ] Push commits: `git push origin main`.
+* [X] Create a forked copy of this project.
+* [X] Clone your OWN version of the repository.
+* [X] Implement the project on the main branch, committing changes regularly.
+* [X] Push commits: `git push origin main`.
 
 ## Running the project
 
 This project uses [Webpack and Babel](https://bloomtech-1.wistia.com/medias/bhi99dwr2x). When the project starts, Webpack transcompiles the LESS into CSS, and injects the JavaScript and the styles into the HTML.
 
 Do not **move or rename any files** in this project. The website's source files live inside the `src` folder. Do not make changes to any files outside of the `src` folder, unless it's new dependecies declared in the `package.json` due to installing NPM libraries (E.G. `npm i lodash`).
 
-* [ ] Run `npm install` to download the project's dependencies.
-* [ ] Run `npm start` to launch the website on `http://localhost:3000`.
+* [X] Run `npm install` to download the project's dependencies.
+* [X] Run `npm start` to launch the website on `http://localhost:3000`.
 
 ## MVP
 
@@ -34,4 +34,4 @@ Do not **move or rename any files** in this project. The website's source files
 
 ## Submission Format
 
-* [ ] Paste a link to your repo into the appropriate canvas input.
+* [X] Paste a link to your repo into the appropriate canvas input.

src/components/article/article.js

@@ -90,6 +90,61 @@ const data = [
   }
 ];
 
+function articleMaker(articleObj){
+  const articleContainer = document.createElement('div');
+  const articleTitle = document.createElement('h2');
+  const articleDate = document.createElement('p');
+  const articleParagraphOne = document.createElement('p');
+  const articleParagraphTwo = document.createElement('p');
+  const articleParagraphThree = document.createElement('p');
+  const expandButton = document.createElement('span');
+
+//   let myPara = getElementById('para');
+// myPara.classList.add('myClass');
+  articleContainer.classList.add('article');
+  articleTitle.classList.add('title');
+  articleDate.classList.add('date');
+
+
+//   const para = document.createElement("p");
+// const node = document.createTextNode("This is a paragraph.");
+
+// para.appendChild(node);
+// document.getElementById("myDIV").appendChild(para);
+
+  articleContainer.appendChild(articleTitle);
+  articleContainer.appendChild(articleDate);
+  articleContainer.appendChild(articleParagraphOne);
+  articleContainer.appendChild(articleParagraphTwo);
+  articleContainer.appendChild(articleParagraphThree);
+  articleContainer.appendChild(expandButton);
+
+  articleTitle.textContent = articleObj.title;
+  articleDate.textContent = articleObj.date;
+  articleParagraphOne.textContent = articleObj.paragraphOne;
+  articleParagraphTwo.textContent = articleObj.paragraphTwo;
+  articleParagraphThree.textContent = articleObj.paragraphThree;
+  expandButton.textContent = "+";
+
+
+  expandButton.addEventListener('click', () => {
+  articleContainer.classList.toggle('article-open');
+
+
+  })
+
+  return articleContainer;
+
+  } 
+
+
+  data.forEach(article => {
+  document.querySelector('div.articles').appendChild(articleMaker(article));
+
+ })
+
+
+
 /*
   Step 1: Write a component called 'articleMaker' to create an article.
   Your component is a function that takes an article object as its only argument,

src/components/menu/menu.js

@@ -9,7 +9,30 @@ let menuItems = [
   'Music',
   'Log Out'
 ];
+function menuMaker(linksArray) {
+  const menuWrapper = document.createElement('div');
+  const menuList = document.createElement('ul');
 
+  menuWrapper.appendChild(menuList);
+
+  menuWrapper.classList.add('menu');
+
+  linksArray.forEach( linkText => {
+    const link = document.createElement('li');
+    link.textContent = linkText;
+    menuList.appendChild(link);
+  })
+
+  const hamMenu = document.querySelector('.menu-button');
+
+  hamMenu.addEventListener('click', () => {
+    menuWrapper.classList.toggle('menu--open');
+
+  })
+  return menuWrapper;
+}
+
+document.querySelector('.header').appendChild(menuMaker(menuItems));
 /*
   Step 1: Write a component called 'menuMaker' to create a menu like the markup below: