From 81912905c0556d89a6eda2312685bc21ec4262a6 Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 11:40:36 -0800 Subject: [PATCH 1/8] added project --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index cfd5251..8da5f33 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,10 @@ 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 @@ -17,8 +17,8 @@ This project uses [Webpack and Babel](https://bloomtech-1.wistia.com/medias/bhi9 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. From 30eb206eb9dfa2a6a651e000f80cabfa5238ff3b Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 12:20:10 -0800 Subject: [PATCH 2/8] created dom node --- src/components/article/article.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/article/article.js b/src/components/article/article.js index 98e9087..ead57a5 100644 --- a/src/components/article/article.js +++ b/src/components/article/article.js @@ -90,6 +90,17 @@ const data = [ } ]; +function articleMaker(obj){ + const articleContainer = document.createElement('div'); + const articelTitle = 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'); + +} + /* 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, From 493a56d86197fa80ee119471de086441e12b6860 Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 12:39:30 -0800 Subject: [PATCH 3/8] added more to dom node --- src/components/article/article.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/article/article.js b/src/components/article/article.js index ead57a5..9b06243 100644 --- a/src/components/article/article.js +++ b/src/components/article/article.js @@ -99,6 +99,12 @@ function articleMaker(obj){ const articleParagraphThree = document.createElement('p'); const expandButton = document.createElement('span'); +// let myPara = getElementById('para'); +// myPara.classList.add('myClass'); + articleContainer.classList.add('article'); + articelTitle.classList.add('title'); + articleDate.classList.add('date'); + } /* From 88c8b3fff7783ea5b0c54259f6d2eece6316f05b Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 13:03:45 -0800 Subject: [PATCH 4/8] appended nodes --- src/components/article/article.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/article/article.js b/src/components/article/article.js index 9b06243..b20e660 100644 --- a/src/components/article/article.js +++ b/src/components/article/article.js @@ -105,6 +105,21 @@ function articleMaker(obj){ articelTitle.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(articelTitle); + articleContainer.appendChild(articleDate); + articleContainer.appendChild(articleParagraphOne); + articleContainer.appendChild(articleParagraphTwo); + articleContainer.appendChild(articleParagraphThree); + articleContainer.appendChild(expandButton); + + } /* From e200de12f5df9f007a246ce78dab04e3d3b37109 Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 13:12:51 -0800 Subject: [PATCH 5/8] added more to nodes --- src/components/article/article.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/article/article.js b/src/components/article/article.js index b20e660..3649acf 100644 --- a/src/components/article/article.js +++ b/src/components/article/article.js @@ -92,7 +92,7 @@ const data = [ function articleMaker(obj){ const articleContainer = document.createElement('div'); - const articelTitle = document.createElement('h2'); + const articleTitle = document.createElement('h2'); const articleDate = document.createElement('p'); const articleParagraphOne = document.createElement('p'); const articleParagraphTwo = document.createElement('p'); @@ -102,7 +102,7 @@ function articleMaker(obj){ // let myPara = getElementById('para'); // myPara.classList.add('myClass'); articleContainer.classList.add('article'); - articelTitle.classList.add('title'); + articleTitle.classList.add('title'); articleDate.classList.add('date'); @@ -112,13 +112,22 @@ function articleMaker(obj){ // para.appendChild(node); // document.getElementById("myDIV").appendChild(para); - articleContainer.appendChild(articelTitle); + 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 = "+"; + + + } From 29cff95796f8ce53f07f96164e9484ab26edfe85 Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 13:48:32 -0800 Subject: [PATCH 6/8] added toggle to button --- src/components/article/article.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/article/article.js b/src/components/article/article.js index 3649acf..ff237f0 100644 --- a/src/components/article/article.js +++ b/src/components/article/article.js @@ -125,6 +125,8 @@ function articleMaker(obj){ articleParagraphTwo.textContent = articleObj.paragraphTwo; articleParagraphThree.textContent = articleObj.paragraphThree; expandButton.textContent = "+"; + expandButton.addEventListener('click', () => { + articleContainer.classList.toggle('article-open'); From f53450ed75281cbf61a18dddac4157c094f2fba7 Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 14:16:16 -0800 Subject: [PATCH 7/8] created menu --- src/components/article/article.js | 2 ++ src/components/menu/menu.js | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/src/components/article/article.js b/src/components/article/article.js index ff237f0..b834fbd 100644 --- a/src/components/article/article.js +++ b/src/components/article/article.js @@ -125,6 +125,8 @@ function articleMaker(obj){ articleParagraphTwo.textContent = articleObj.paragraphTwo; articleParagraphThree.textContent = articleObj.paragraphThree; expandButton.textContent = "+"; + + expandButton.addEventListener('click', () => { articleContainer.classList.toggle('article-open'); diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js index 4bf233c..7f1b01a 100644 --- a/src/components/menu/menu.js +++ b/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: From c1edec50b8b254fa5b1310826425f07ed4c94bfd Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Wed, 9 Feb 2022 14:24:45 -0800 Subject: [PATCH 8/8] added more --- src/components/article/article.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/article/article.js b/src/components/article/article.js index b834fbd..81c228a 100644 --- a/src/components/article/article.js +++ b/src/components/article/article.js @@ -90,7 +90,7 @@ const data = [ } ]; -function articleMaker(obj){ +function articleMaker(articleObj){ const articleContainer = document.createElement('div'); const articleTitle = document.createElement('h2'); const articleDate = document.createElement('p'); @@ -126,14 +126,24 @@ function articleMaker(obj){ 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.