diff --git a/components/Article.js b/components/Article.js index 71c9c99c0..18a3019a7 100644 --- a/components/Article.js +++ b/components/Article.js @@ -89,28 +89,70 @@ const data = [ } ]; -/* - 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: +// +// 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}

+ function articleMaker(obj) { + const articleCont = document.createElement('div'); + const heitch2 = document.createElement('h2'); + const date = document.createElement('p'); - {three separate paragraph elements} + const p1 = document.createElement('p'); + const p2 = document.createElement('p'); + const p3 = document.createElement('p'); - + -
+ const span = document.createElement('span'); - Step 2: Still inside `articleMaker`, add an event listener to the span.expandButton. - This listener should toggle the class 'article-open' on div.article. + articleCont.classList.add('article') + span.classList.add('expandButton') + - Step 3: Don't forget to return something from your function! + articleCont.appendChild(heitch2); + articleCont.appendChild(date); + articleCont.appendChild(p1); + articleCont.appendChild(p2); + articleCont.appendChild(p3); + articleCont.appendChild(span); - 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). + heitch2.textContent = obj.title; + date.textContent = obj.date; + p1.textContent = obj.firstParagraph; + p2.textContent = obj.secondParagraph; + p3.textContent = obj.thirdParagraph; + span.textContent = '|?|'; - 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. -*/ + + span.addEventListener('click', () => { + articleCont.classList.toggle('article-open'); + }); + return articleCont; + } + + data.forEach(article => { + document.querySelector('div.articles').appendChild(articleMaker(article)); + }); + + articleMaker(); + +//
+//

{title of the article}

+//

{date of the article}

+ +// {three separate paragraph elements} + +// + +//
+ +// 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 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. +// diff --git a/components/Menu.js b/components/Menu.js index b27794d01..f8988e85c 100644 --- a/components/Menu.js +++ b/components/Menu.js @@ -9,25 +9,50 @@ 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: -
- -
+function menuMaker(array) { + const menuCont = document.createElement('div'); + const menuUl = document.createElement('ul'); - The 'menuMaker' takes an array of menu items as its only argument. + menuCont.appendChild(menuUl); - 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