From 2243e07eefb9188c9ed52d3a90fac2f5936a8345 Mon Sep 17 00:00:00 2001 From: David Conley Date: Wed, 1 Dec 2021 13:48:29 -0700 Subject: [PATCH 1/5] created the elements for the bloomtech newsfeed website and added the structure to those elements --- components/Article.js | 70 +++++++++++++++++++++++++++++++------------ index.html | 9 ++++-- 2 files changed, 57 insertions(+), 22 deletions(-) diff --git a/components/Article.js b/components/Article.js index 71c9c99c0..716a05ce4 100644 --- a/components/Article.js +++ b/components/Article.js @@ -4,7 +4,7 @@ const data = [ { title: 'BloomTech Students: "We\'re the best!"', - date: 'Nov 5th, 2018', + date: "Nov 5th, 2018", firstParagraph: `Lucas ipsum dolor sit amet ben twi'lek padmé darth darth darth moff hutt organa twi'lek. Ben amidala secura skywalker lando moff wicket tatooine luke.Solo wampa wampa calrissian yoda moff.Darth grievous darth gonk darth hutt.Darth baba skywalker watto fett jango maul han.Mon ewok sidious sidious lando kenobi grievous gamorrean solo.Yoda wedge utapau darth calamari. @@ -21,11 +21,11 @@ const data = [ thirdParagraph: `Dagobah hutt jawa leia calamari ventress skywalker yoda. Binks wicket hutt coruscant sidious naboo ackbar tatooine. Hutt lars padmé darth. Maul solo darth darth jabba qui-gon chewbacca darth maul. Moff baba wicket han. C-3po antilles moff qui-gon ahsoka aayla dooku amidala. Palpatine droid amidala droid k-3po twi'lek padmé wookiee. Leia - moff calamari mon obi-wan. Solo grievous lando coruscant. Jinn darth palpatine obi-wan mon.` + moff calamari mon obi-wan. Solo grievous lando coruscant. Jinn darth palpatine obi-wan mon.`, }, { - title: 'Javascript and You, ES6', - date: 'May 7th, 2019', + title: "Javascript and You, ES6", + date: "May 7th, 2019", firstParagraph: `Alohamora wand elf parchment, Wingardium Leviosa hippogriff, house dementors betrayal. Holly, Snape centaur portkey ghost Hermione spell bezoar Scabbers. Peruvian-Night-Powder werewolf, Dobby pear-tickle half-moon-glasses, Knight-Bus. Padfoot snargaluff seeker: Hagrid broomstick mischief managed. Snitch Fluffy rock-cake, 9 ¾ dress robes I must not tell lies. Mudbloods @@ -41,11 +41,11 @@ const data = [ thirdParagraph: `Toad-like smile Flourish and Blotts he knew I’d come back Quidditch World Cup. Fat Lady baubles banana fritters fairy lights Petrificus Totalus. So thirsty, deluminator firs’ years follow me 12 inches of parchment. Head Boy start-of-term banquet Cleansweep Seven roaring lion hat. Unicorn blood crossbow mars is bright tonight, feast Norwegian Ridgeback. Come seek us where our voices sound, we cannot - sing above the ground, Ginny Weasley bright red. Fanged frisbees, phoenix tears good clean match.` + sing above the ground, Ginny Weasley bright red. Fanged frisbees, phoenix tears good clean match.`, }, { - title: 'React vs Angular vs Vue', - date: 'June 7th, 2019', + title: "React vs Angular vs Vue", + date: "June 7th, 2019", firstParagraph: `Bulbasaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ivysaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Venusaur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Charmander Lorem ipsum dolor sit amet, consectetur adipiscing elit. Charmeleon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Charizard Lorem ipsum dolor sit amet, @@ -69,11 +69,11 @@ const data = [ thirdParagraph: `Gotta catch 'em all Horsea gym Ninjask Absol Sinnoh Poliwag. Gotta catch 'em all Youngster wants to fight Soda Pop Floatzel Leech Life Seismitoad Ariados. Earthquake Pokemon Glitch City Tail Whip Skitty Ekans Dialga. Ut aliquip ex ea commodo consequat James - Castform Lotad the power that's inside Burnt Berry Makuhita. Ghost Ariados Corphish Dusclops Golbat Gligar Zweilous.` + Castform Lotad the power that's inside Burnt Berry Makuhita. Ghost Ariados Corphish Dusclops Golbat Gligar Zweilous.`, }, { - title: 'Professional Software Development in 2019', - date: 'Jan 1st, 2019', + title: "Professional Software Development in 2019", + 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? `, @@ -85,8 +85,8 @@ const data = [ 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.` - } + Hodor. Hodor, hodor, hodor. Hodor hodor... Hodor hodor hodor?! Hodor, hodor... Hodor hodor HODOR hodor, hodor hodor. Hodor.`, + }, ]; /* @@ -94,14 +94,9 @@ const data = [ 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} + - + -
+ Step 2: Still inside `articleMaker`, add an event listener to the span.expandButton. This listener should toggle the class 'article-open' on div.article. @@ -113,4 +108,41 @@ const data = [ 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. + + +
+

{title of the article}

+

{date of the article}

+ + {three separate paragraph elements} + + + +
*/ + +function articleMaker(obj) { + const articleDiv = document.createElement("div"); + const articleTitle = document.createElement("h2"); + const paragraphDate = document.createElement("p"); + const paragraphOne = document.createElement("p"); + const paragraphTwo = document.createElement("p"); + const paragraphThree = document.createElement("p"); + const button = document.createElement("span"); + + articleDiv.appendChild(articleTitle); + articleDiv.appendChild(paragraphDate); + articleDiv.appendChild(paragraphOne); + articleDiv.appendChild(paragraphTwo); + articleDiv.appendChild(paragraphThree); + articleDiv.appendChild(button); + + articleDiv.classList.add("article"); + paragraphDate.classList.add("date"); + paragraphOne.classList.add("one"); + paragraphTwo.classList.add("two"); + paragraphThree.classList.add("three"); + button.classList.add("expandButton"); + + articleTitle.textContent = obj.title; + paragraphDate.textContent = obj.date; +} diff --git a/index.html b/index.html index 5a7e66f28..4adf00ab7 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,17 @@ BloomTech Newsfeed - - + +
- +

BloomTech Newsfeed

From c378fdc87a94542d264bfc217eaf90e1898c2a76 Mon Sep 17 00:00:00 2001 From: David Conley Date: Wed, 1 Dec 2021 14:33:17 -0700 Subject: [PATCH 2/5] finished making component with the toggle capability and created foreach function loop over the data set --- components/Article.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/components/Article.js b/components/Article.js index 716a05ce4..95d9f5daf 100644 --- a/components/Article.js +++ b/components/Article.js @@ -119,6 +119,7 @@ const data = [ + */ +const articles = document.querySelector("div.article"); function articleMaker(obj) { const articleDiv = document.createElement("div"); @@ -127,22 +128,36 @@ function articleMaker(obj) { const paragraphOne = document.createElement("p"); const paragraphTwo = document.createElement("p"); const paragraphThree = document.createElement("p"); - const button = document.createElement("span"); + const expand = document.createElement("span"); articleDiv.appendChild(articleTitle); articleDiv.appendChild(paragraphDate); articleDiv.appendChild(paragraphOne); articleDiv.appendChild(paragraphTwo); articleDiv.appendChild(paragraphThree); - articleDiv.appendChild(button); + articleDiv.appendChild(expand); articleDiv.classList.add("article"); paragraphDate.classList.add("date"); paragraphOne.classList.add("one"); paragraphTwo.classList.add("two"); paragraphThree.classList.add("three"); - button.classList.add("expandButton"); + expand.classList.add("expandButton"); articleTitle.textContent = obj.title; paragraphDate.textContent = obj.date; + paragraphOne.textContent = obj.firstParagraph; + paragraphTwo.textContent = obj.secondParagraph; + paragraphThree.textContent = obj.thirdParagraph; + + expand.addEventListener("click", (e) => { + e.target.classList.toggle("article-open"); + }); + + return articleDiv; } + +data.forEach((article) => { + const articlesFromData = articleMaker(article); + articles.appendChild(articlesFromData); +}); From 0582a6a9d799f1caa8b3b0a29274cfcafed9702e Mon Sep 17 00:00:00 2001 From: David Conley Date: Wed, 1 Dec 2021 15:50:26 -0700 Subject: [PATCH 3/5] got the toggle working and the website to render the article data --- components/Article.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Article.js b/components/Article.js index 95d9f5daf..7767aa9dc 100644 --- a/components/Article.js +++ b/components/Article.js @@ -119,7 +119,7 @@ const data = [ + */ -const articles = document.querySelector("div.article"); +const articles = document.querySelector("div.articles"); function articleMaker(obj) { const articleDiv = document.createElement("div"); @@ -137,7 +137,7 @@ function articleMaker(obj) { articleDiv.appendChild(paragraphThree); articleDiv.appendChild(expand); - articleDiv.classList.add("article"); + articleDiv.classList.add("article", "article-open"); paragraphDate.classList.add("date"); paragraphOne.classList.add("one"); paragraphTwo.classList.add("two"); @@ -150,8 +150,8 @@ function articleMaker(obj) { paragraphTwo.textContent = obj.secondParagraph; paragraphThree.textContent = obj.thirdParagraph; - expand.addEventListener("click", (e) => { - e.target.classList.toggle("article-open"); + expand.addEventListener("click", () => { + articleDiv.classList.toggle("article-open"); }); return articleDiv; From 566ae7edbebbd9bf22e0df89a46f12914fd15e22 Mon Sep 17 00:00:00 2001 From: David Conley Date: Wed, 1 Dec 2021 18:02:38 -0700 Subject: [PATCH 4/5] working on menu bar have about 90% of the code written but stuck on how to get these list items to appear correctly --- components/Menu.js | 45 ++++++++++++++++++++++++++++++++++++++------- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/components/Menu.js b/components/Menu.js index b27794d01..acb65d585 100644 --- a/components/Menu.js +++ b/components/Menu.js @@ -1,22 +1,22 @@ // This is the data we will be using, study it but don't change anything, yet. let menuItems = [ - 'Students', - 'Faculty', + "Students", + "Faculty", "What's New", - 'Tech Trends', - 'Music', - 'Log Out' + "Tech Trends", + "Music", + "Log Out", ]; /* Step 1: Write a component called 'menuMaker' to create a menu like the markup below: -
    {each menu item as an
  • }
+ The 'menuMaker' takes an array of menu items as its only argument. @@ -30,4 +30,35 @@ let menuItems = [ Step 5: Don't forget to return your div.menu. Step 6: Use 'menuMaker' to create a menu using the 'menuItems' array, and append the returned menu to the header. -*/ + + */ + +const header = document.querySelector(".header"); + +function menuMaker(array) { + const menuBar = document.createElement("div"); + const menuItems = document.createElement("ul"); + + array.forEach((item) => { + let listItem = document.createElement("li"); + menuItems.appendChild(listItem); + listItem.textContent = item; + }); + + menuBar.appendChild(menuItems); + + menuBar.classList.add("menu", "menu--open"); + + const buttonOnMenu = document.querySelector(".menu-button"); + + buttonOnMenu.addEventListener("click", () => { + menuBar.classList.toggle("menu--open"); + }); + + return menuBar; +} + +menuItems.forEach((element) => { + const menuElements = menuMaker(element); + header.appendChild(menuElements); +}); From 8d8faf6037562f76eecf4bfb9d3a3e61e17a7e39 Mon Sep 17 00:00:00 2001 From: David Conley Date: Wed, 1 Dec 2021 19:20:24 -0700 Subject: [PATCH 5/5] finished everything that was missing that was part of the assignment --- components/Article.js | 1 + components/Menu.js | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/Article.js b/components/Article.js index 7767aa9dc..dd92a82fd 100644 --- a/components/Article.js +++ b/components/Article.js @@ -149,6 +149,7 @@ function articleMaker(obj) { paragraphOne.textContent = obj.firstParagraph; paragraphTwo.textContent = obj.secondParagraph; paragraphThree.textContent = obj.thirdParagraph; + expand.textContent = "+"; expand.addEventListener("click", () => { articleDiv.classList.toggle("article-open"); diff --git a/components/Menu.js b/components/Menu.js index acb65d585..b5131c967 100644 --- a/components/Menu.js +++ b/components/Menu.js @@ -58,7 +58,5 @@ function menuMaker(array) { return menuBar; } -menuItems.forEach((element) => { - const menuElements = menuMaker(element); - header.appendChild(menuElements); -}); +const menuElements = menuMaker(menuItems); +header.appendChild(menuElements);