From 5ec2a1754e33efd0398240392cfed7e2522de678 Mon Sep 17 00:00:00 2001 From: DayLaFavor Date: Wed, 1 Dec 2021 20:05:16 -0600 Subject: [PATCH] finished --- components/Article.js | 89 +- components/Menu.js | 54 +- package-lock.json | 4201 ++++++++++++++++++++++++----------------- 3 files changed, 2550 insertions(+), 1794 deletions(-) diff --git a/components/Article.js b/components/Article.js index 259f241423..aaf150894f 100644 --- a/components/Article.js +++ b/components/Article.js @@ -83,34 +83,87 @@ const data = [ 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? `, + 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: 'Wow what a story mark', + date: 'Jan 1st, 2019', + firstParagraph: `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? `, + + secondParagraph: `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 - hodor hodor hodor. Hodor. Hodor hodor... Hodor hodor hodor hodor hodor? `, + 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.` } ]; -/* - 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, - and returns a DOM node looking like the one below: -
-

{title of the article}

-

{date of the 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, + // and returns a DOM node looking like the one below: + + //
+ //

{title of the article}

+ //

{date of the article}

+ + // {three separate paragraph elements} + + // + + //
+function articleMaker(obj){ + const article = document.createElement('div'); + const articleTitle = document.createElement('h2'); + const articleDate = document.createElement('p'); + const articlePara1 = document.createElement('p'); + const articlePara2 = document.createElement('p'); + const articlePara3 = document.createElement('p'); + const expandButton = document.createElement('span'); + + article.classList.add('article'); + articleDate.classList.add('date'); + expandButton.classList.add('expandButton'); + + article.appendChild(articleTitle); + article.appendChild(articleDate) + article.appendChild(articlePara1) + article.appendChild(articlePara2) + article.appendChild(articlePara3) + article.appendChild(expandButton) + + articleTitle.textContent = obj.title; + articleDate.textContent = obj.date; + articlePara1.textContent = obj.firstParagraph; + articlePara2.textContent = obj.secondParagraph; + articlePara3.textContent = obj.thirdParagraph; + expandButton.textContent = '+'; + + // console.log(article) + expandButton.addEventListener('click', () => { + article.classList.toggle('article-open') + }) + return article +} - {three separate paragraph elements} +data.forEach(article => { + document.querySelector('div.articles').appendChild(articleMaker(article)) +}) - + -
+ // Step 2: Still inside `articleMaker`, add an event listener to the span.expandButton. + // This listener should toggle the class 'article-open' on div.article. - Step 2: Still inside `articleMaker`, add an event listener to the span.expandButton. - This listener should toggle the class 'article-open' on div.article. + // Step 3: Don't forget to return something from your function! - Step 3: Don't forget to return something from your function! + // Step 4: Outside your function now, loop over the data. At each iteration you'll use your component + // to create a div.article element and append it to the DOM inside div.articles (see index.html). - Step 4: Outside your function now, loop over the data. At each iteration you'll use your component - to create a div.article element and append it to the DOM inside div.articles (see index.html). + // 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 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. -*/ diff --git a/components/Menu.js b/components/Menu.js index b27794d01c..b920326ede 100644 --- a/components/Menu.js +++ b/components/Menu.js @@ -9,25 +9,49 @@ let menuItems = [ 'Log Out' ]; -/* - Step 1: Write a component called 'menuMaker' to create a menu like the markup below: -
- -
+ // Step 1: Write a component called 'menuMaker' to create a menu like the markup below: - The 'menuMaker' takes an array of menu items as its only argument. + //
+ // + //
- Step 2: Inside the function, iterate over the array creating a list item
  • element for each item in the array. - Add those items to the