-
{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))
+})
-
+
-