From 00440cb90f173d8930da17033d117c7d4b4a1be2 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Mon, 7 Oct 2024 11:48:02 -0600 Subject: [PATCH 01/40] fix: small change on readme to test push to github --- README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index 21685896a..6cd25184c 100644 --- a/README.md +++ b/README.md @@ -15,11 +15,7 @@ Project spec & rubric can be found [here](https://curriculum.turing.edu/module2/ To view your project: 1. In your terminal, navigate to your project repo -2. Run the command `open index.html` - -______________________________________________________ -# README Template -Before turning this project in, erase this line and everything above it and fill in the info below. +2. Run the command `open index.html` ______________________________________________________ # Hang in There From 4ccfe55087688d35309ad75ce9c62d6ef82edab5 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Mon, 7 Oct 2024 17:01:37 -0600 Subject: [PATCH 02/40] feat: add variables and function to show homepage poster --- src/main.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/main.js b/src/main.js index d818a0ab6..61c708562 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,3 @@ -// query selector variables go here πŸ‘‡ - // we've provided you with some data to work with πŸ‘‡ // tip: you can tuck this data out of view with the dropdown found near the line number where the variable is declared var images = [ @@ -102,8 +100,13 @@ var quotes = [ var savedPosters = []; var currentPoster; -// event listeners go here πŸ‘‡ +// query selector variables go here πŸ‘‡ +var posterImages = document.querySelector(".poster-img") +var posterTitles = document.querySelector(".poster-title") +var posterQuotes = document.querySelector(".poster-quote") +// event listeners go here πŸ‘‡ +window.addEventListener("load", showRandomHomepagePoster) // functions and event handlers go here πŸ‘‡ // (we've provided two to get you started)! function getRandomIndex(array) { @@ -116,4 +119,10 @@ function createPoster(imageURL, title, quote) { imageURL: imageURL, title: title, quote: quote} +} + +function showRandomHomepagePoster() { + posterImages.src = images[getRandomIndex(images)]; + posterQuotes.innerText = quotes[getRandomIndex(quotes)]; + posterTitles.innerText = titles[getRandomIndex(titles)]; } \ No newline at end of file From 80ee8087f62de6e1c49ec4c3ed62bc882ace1f5a Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Mon, 7 Oct 2024 17:27:48 -0600 Subject: [PATCH 03/40] feat: pseudocode and set up functions for the page views --- src/main.js | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 61c708562..30c1ab68e 100644 --- a/src/main.js +++ b/src/main.js @@ -125,4 +125,37 @@ function showRandomHomepagePoster() { posterImages.src = images[getRandomIndex(images)]; posterQuotes.innerText = quotes[getRandomIndex(quotes)]; posterTitles.innerText = titles[getRandomIndex(titles)]; -} \ No newline at end of file +} +//In this function above I am using the getRandomIndex function to generate a random poster. +//This function is triggered by the event listener above, when the window is loaded. + +function mainPageView() { + +} +//This is the default view in the html file. +//write event listeners for the function +//write query selectors for the buttons: "nevermind take me back" button and "Back to main" buttons +//show the .main-poster (remove hidden) +//hide the .poster-form view (add hidden) +//hide the .saved-posters view (add hidden) + +function formView() { + +} +//write event listeners for the function +//write query selectors for the button: "Make your own poster" button +//show the .poster-form view (remove hidden) +//hide the .saved-posters view (add hidden) +//hide the .main-poster view (add hidden) + +function savedPostersView() { + +} +//write event listeners for the function +//write query selectors for the button: for "show saved posters" button +//show the .saved-posters view (remove hidden) +//hide the .poster-form view (add hidden) +//hide the .main-poster view (add hidden) + + +console.log(savedPosters) \ No newline at end of file From 241b3d9327685da76fe83717becfdeacc5daec86 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Mon, 7 Oct 2024 18:14:17 -0600 Subject: [PATCH 04/40] feat: hide and unhide to show user different page views --- src/main.js | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/src/main.js b/src/main.js index 30c1ab68e..5756bf502 100644 --- a/src/main.js +++ b/src/main.js @@ -104,9 +104,24 @@ var currentPoster; var posterImages = document.querySelector(".poster-img") var posterTitles = document.querySelector(".poster-title") var posterQuotes = document.querySelector(".poster-quote") +var makeOwnPosterButton = document.querySelector(".show-form") +var showSavedPostersButton = document.querySelector(".show-saved") +var showMainPageButton = document.querySelector(".show-main") +var backToMainButton = document.querySelector(".back-to-main") +var showRandomPosterButton = document.querySelector(".show-random") +var mainPosterViewSection = document.querySelector(".main-poster") +var OwnPosterFormSection = document.querySelector(".poster-form") +var savedPostersSection = document.querySelector(".saved-posters") +var showRandomPosterButton = document.querySelector(".show-random") // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) +makeOwnPosterButton.addEventListener("click", formView) +showSavedPostersButton.addEventListener("click", savedPostersView) +showMainPageButton.addEventListener("click", mainPageView) +backToMainButton.addEventListener("click", mainPageView) +showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) + // functions and event handlers go here πŸ‘‡ // (we've provided two to get you started)! function getRandomIndex(array) { @@ -123,14 +138,23 @@ function createPoster(imageURL, title, quote) { function showRandomHomepagePoster() { posterImages.src = images[getRandomIndex(images)]; - posterQuotes.innerText = quotes[getRandomIndex(quotes)]; posterTitles.innerText = titles[getRandomIndex(titles)]; + posterQuotes.innerText = quotes[getRandomIndex(quotes)]; + + currentPoster = { + imageURL: posterImages.src, + title: posterTitles.innerText, + quote: posterQuotes.innerText + }; + return currentPoster } //In this function above I am using the getRandomIndex function to generate a random poster. //This function is triggered by the event listener above, when the window is loaded. function mainPageView() { - + mainPosterViewSection.classList.remove("hidden") + savedPostersSection.classList.add("hidden") + OwnPosterFormSection.classList.add("hidden") } //This is the default view in the html file. //write event listeners for the function @@ -140,7 +164,8 @@ function mainPageView() { //hide the .saved-posters view (add hidden) function formView() { - + OwnPosterFormSection.classList.remove("hidden") + mainPosterViewSection.classList.add("hidden") } //write event listeners for the function //write query selectors for the button: "Make your own poster" button @@ -149,7 +174,9 @@ function formView() { //hide the .main-poster view (add hidden) function savedPostersView() { - + savedPostersSection.classList.remove("hidden") + OwnPosterFormSection.classList.add("hidden") + mainPosterViewSection.classList.add("hidden") } //write event listeners for the function //write query selectors for the button: for "show saved posters" button From 82b678d1e46206774dc164f67d0f0a37d4adbe29 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Tue, 8 Oct 2024 10:10:03 -0600 Subject: [PATCH 05/40] feat: add a possible set up for a view refactor --- src/main.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/main.js b/src/main.js index 5756bf502..1eea86e00 100644 --- a/src/main.js +++ b/src/main.js @@ -184,5 +184,10 @@ function savedPostersView() { //hide the .poster-form view (add hidden) //hide the .main-poster view (add hidden) +//REFACTOR FOR PAGE VIEWS + +function togglePageView(element) { + element.classList.toggle("hidden") +} console.log(savedPosters) \ No newline at end of file From ec771b807fae16e5ad18b623898b5299cffe6955 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Tue, 8 Oct 2024 11:51:50 -0600 Subject: [PATCH 06/40] refactor: create a viewHandler function and update event listeners --- src/main.js | 57 +++++++++++++---------------------------------------- 1 file changed, 14 insertions(+), 43 deletions(-) diff --git a/src/main.js b/src/main.js index 1eea86e00..c5e7345db 100644 --- a/src/main.js +++ b/src/main.js @@ -116,10 +116,10 @@ var showRandomPosterButton = document.querySelector(".show-random") // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) -makeOwnPosterButton.addEventListener("click", formView) -showSavedPostersButton.addEventListener("click", savedPostersView) -showMainPageButton.addEventListener("click", mainPageView) -backToMainButton.addEventListener("click", mainPageView) +makeOwnPosterButton.addEventListener("click", function() {viewHandler('form')}) +showSavedPostersButton.addEventListener("click", function() {viewHandler('saved')}) +showMainPageButton.addEventListener("click", function() {viewHandler('main')}) +backToMainButton.addEventListener("click", function() {viewHandler('main')}) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) // functions and event handlers go here πŸ‘‡ @@ -148,46 +148,17 @@ function showRandomHomepagePoster() { }; return currentPoster } -//In this function above I am using the getRandomIndex function to generate a random poster. -//This function is triggered by the event listener above, when the window is loaded. -function mainPageView() { - mainPosterViewSection.classList.remove("hidden") - savedPostersSection.classList.add("hidden") - OwnPosterFormSection.classList.add("hidden") -} -//This is the default view in the html file. -//write event listeners for the function -//write query selectors for the buttons: "nevermind take me back" button and "Back to main" buttons -//show the .main-poster (remove hidden) -//hide the .poster-form view (add hidden) -//hide the .saved-posters view (add hidden) - -function formView() { - OwnPosterFormSection.classList.remove("hidden") - mainPosterViewSection.classList.add("hidden") -} -//write event listeners for the function -//write query selectors for the button: "Make your own poster" button -//show the .poster-form view (remove hidden) -//hide the .saved-posters view (add hidden) -//hide the .main-poster view (add hidden) - -function savedPostersView() { - savedPostersSection.classList.remove("hidden") - OwnPosterFormSection.classList.add("hidden") - mainPosterViewSection.classList.add("hidden") -} -//write event listeners for the function -//write query selectors for the button: for "show saved posters" button -//show the .saved-posters view (remove hidden) -//hide the .poster-form view (add hidden) -//hide the .main-poster view (add hidden) - -//REFACTOR FOR PAGE VIEWS - -function togglePageView(element) { - element.classList.toggle("hidden") +function viewHandler(view) { + const views = { + main: mainPosterViewSection, + form: OwnPosterFormSection, + saved: savedPostersSection + } + Object.values(views).forEach((section) => { + section.classList.add("hidden") + }) + views[view].classList.remove("hidden") } console.log(savedPosters) \ No newline at end of file From b964391eee98421f48fe73ec0064749259c88a16 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Tue, 8 Oct 2024 11:58:02 -0600 Subject: [PATCH 07/40] fix: rename the view handler function to begin with a present tense verb --- src/main.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/main.js b/src/main.js index c5e7345db..71a02b758 100644 --- a/src/main.js +++ b/src/main.js @@ -116,14 +116,13 @@ var showRandomPosterButton = document.querySelector(".show-random") // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) -makeOwnPosterButton.addEventListener("click", function() {viewHandler('form')}) -showSavedPostersButton.addEventListener("click", function() {viewHandler('saved')}) -showMainPageButton.addEventListener("click", function() {viewHandler('main')}) -backToMainButton.addEventListener("click", function() {viewHandler('main')}) +makeOwnPosterButton.addEventListener("click", function() {handleView('form')}) +showSavedPostersButton.addEventListener("click", function() {handleView('saved')}) +showMainPageButton.addEventListener("click", function() {handleView('main')}) +backToMainButton.addEventListener("click", function() {handleView('main')}) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) // functions and event handlers go here πŸ‘‡ -// (we've provided two to get you started)! function getRandomIndex(array) { return Math.floor(Math.random() * array.length); } @@ -149,7 +148,7 @@ function showRandomHomepagePoster() { return currentPoster } -function viewHandler(view) { +function handleView(view) { const views = { main: mainPosterViewSection, form: OwnPosterFormSection, From 35a5b719d282ba5bd3617538acc1dc6c79c1f644 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Tue, 8 Oct 2024 12:21:50 -0600 Subject: [PATCH 08/40] feat: clearly explain my function in order to access, and use it for future buttons --- src/main.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/main.js b/src/main.js index 71a02b758..b926576e7 100644 --- a/src/main.js +++ b/src/main.js @@ -122,6 +122,10 @@ showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main')}) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) +//the anonymous callback function () used above is for deferring its execution +//until the button is acutually clicked. + + // functions and event handlers go here πŸ‘‡ function getRandomIndex(array) { return Math.floor(Math.random() * array.length); @@ -154,10 +158,20 @@ function handleView(view) { form: OwnPosterFormSection, saved: savedPostersSection } + //this object above links the keys to the dom elements (via the query selectors) + + Object.values(views).forEach((section) => { section.classList.add("hidden") + console.log(Object.values(views)) }) + //above we start by removing all of the view sections + //Object.values() takes my views object above it and returns an array + //containing all of the values of that object’s properties, ignoring the keys. + views[view].classList.remove("hidden") + console.log(views[view]) } +//based on whatever argument was passed in (ie: 'form'), we will make that section visible console.log(savedPosters) \ No newline at end of file From 27e3967678225cd9bd85da930b86db908e71146a Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Tue, 8 Oct 2024 17:22:02 -0600 Subject: [PATCH 09/40] feat: add functionality to show the user poster --- src/main.js | 50 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/src/main.js b/src/main.js index b926576e7..29802ddf9 100644 --- a/src/main.js +++ b/src/main.js @@ -101,9 +101,12 @@ var savedPosters = []; var currentPoster; // query selector variables go here πŸ‘‡ -var posterImages = document.querySelector(".poster-img") -var posterTitles = document.querySelector(".poster-title") -var posterQuotes = document.querySelector(".poster-quote") +var posterImage = document.querySelector(".poster-img") +var posterTitle = document.querySelector(".poster-title") +var posterQuote = document.querySelector(".poster-quote") +var userPosterImage = document.querySelector("#poster-image-url") +var userPosterTitle = document.querySelector("#poster-title") +var userPosterQuote = document.querySelector("#poster-quote") var makeOwnPosterButton = document.querySelector(".show-form") var showSavedPostersButton = document.querySelector(".show-saved") var showMainPageButton = document.querySelector(".show-main") @@ -113,6 +116,7 @@ var mainPosterViewSection = document.querySelector(".main-poster") var OwnPosterFormSection = document.querySelector(".poster-form") var savedPostersSection = document.querySelector(".saved-posters") var showRandomPosterButton = document.querySelector(".show-random") +var showUserPosterButton = document.querySelector(".make-poster") // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) @@ -120,8 +124,11 @@ makeOwnPosterButton.addEventListener("click", function() {handleView('form')}) showSavedPostersButton.addEventListener("click", function() {handleView('saved')}) showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main')}) +showUserPosterButton.addEventListener("click", function() {handleView('main')}) +showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) + //the anonymous callback function () used above is for deferring its execution //until the button is acutually clicked. @@ -140,14 +147,14 @@ function createPoster(imageURL, title, quote) { } function showRandomHomepagePoster() { - posterImages.src = images[getRandomIndex(images)]; - posterTitles.innerText = titles[getRandomIndex(titles)]; - posterQuotes.innerText = quotes[getRandomIndex(quotes)]; + posterImage.src = images[getRandomIndex(images)]; + posterTitle.innerText = titles[getRandomIndex(titles)]; + posterQuote.innerText = quotes[getRandomIndex(quotes)]; currentPoster = { - imageURL: posterImages.src, - title: posterTitles.innerText, - quote: posterQuotes.innerText + imageURL: posterImage.src, + title: posterTitle.innerText, + quote: posterQuote.innerText }; return currentPoster } @@ -163,15 +170,34 @@ function handleView(view) { Object.values(views).forEach((section) => { section.classList.add("hidden") - console.log(Object.values(views)) + // console.log(Object.values(views)) }) //above we start by removing all of the view sections //Object.values() takes my views object above it and returns an array //containing all of the values of that object’s properties, ignoring the keys. views[view].classList.remove("hidden") - console.log(views[view]) + // console.log(views[view]) } //based on whatever argument was passed in (ie: 'form'), we will make that section visible -console.log(savedPosters) \ No newline at end of file +function showUserCreatedPoster(event) { + event.preventDefault(); + + posterImage.src = userPosterImage.value; + posterTitle.innerText = userPosterTitle.value; + posterQuote.innerText = userPosterQuote.value; + + currentPoster = { + imageURL: posterImage.src, + title: posterTitle.innerText, + quote: posterQuote.innerText + } + return currentPoster +} + +// console.log(savedPosters) +// console.log(images) +console.log(titles) +// // console.log(quotes) + From 98e8df81c2a960ea0fa99807fdf32db7b761e54c Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Tue, 8 Oct 2024 17:45:34 -0600 Subject: [PATCH 10/40] feat: add the user generated poster to the images, titles, and quotes arrays) --- src/main.js | 46 ++++++++++++++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/src/main.js b/src/main.js index 29802ddf9..1a8938ca4 100644 --- a/src/main.js +++ b/src/main.js @@ -151,12 +151,11 @@ function showRandomHomepagePoster() { posterTitle.innerText = titles[getRandomIndex(titles)]; posterQuote.innerText = quotes[getRandomIndex(quotes)]; - currentPoster = { + return currentPoster = { imageURL: posterImage.src, title: posterTitle.innerText, quote: posterQuote.innerText }; - return currentPoster } function handleView(view) { @@ -179,25 +178,40 @@ function handleView(view) { views[view].classList.remove("hidden") // console.log(views[view]) } -//based on whatever argument was passed in (ie: 'form'), we will make that section visible function showUserCreatedPoster(event) { event.preventDefault(); - posterImage.src = userPosterImage.value; - posterTitle.innerText = userPosterTitle.value; - posterQuote.innerText = userPosterQuote.value; + let userImage = userPosterImage.value, + userTitle = userPosterTitle.value, + userQuote = userPosterQuote.value; - currentPoster = { - imageURL: posterImage.src, - title: posterTitle.innerText, - quote: posterQuote.innerText - } - return currentPoster + console.log("User Image:", userImage); + console.log("User Title:", userTitle); + console.log("User Quote:", userQuote); + + posterImage.src = userImage; + posterTitle.innerText = userTitle; + posterQuote.innerText = userQuote; + + addUserPoster(userImage, userTitle, userQuote); + + console.log("Images array:", images); + console.log("Titles array:", titles); + console.log("Quotes array:", quotes); + + return currentPoster = { + imageURL: userImage, + title: userTitle, + quote: userQuote + }; } -// console.log(savedPosters) -// console.log(images) -console.log(titles) -// // console.log(quotes) +function addUserPoster(image, title, quote) { + images.push(image) + titles.push(title) + quotes.push(quote) +} + + From 16207ba043a3833e53d74518203fd403aeb674be Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 12:20:58 -0600 Subject: [PATCH 11/40] feat: make a showPoster helper function --- src/main.js | 47 ++++++++++++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/src/main.js b/src/main.js index 1a8938ca4..a1fa32c20 100644 --- a/src/main.js +++ b/src/main.js @@ -146,17 +146,7 @@ function createPoster(imageURL, title, quote) { quote: quote} } -function showRandomHomepagePoster() { - posterImage.src = images[getRandomIndex(images)]; - posterTitle.innerText = titles[getRandomIndex(titles)]; - posterQuote.innerText = quotes[getRandomIndex(quotes)]; - return currentPoster = { - imageURL: posterImage.src, - title: posterTitle.innerText, - quote: posterQuote.innerText - }; -} function handleView(view) { const views = { @@ -166,7 +156,6 @@ function handleView(view) { } //this object above links the keys to the dom elements (via the query selectors) - Object.values(views).forEach((section) => { section.classList.add("hidden") // console.log(Object.values(views)) @@ -179,6 +168,30 @@ function handleView(view) { // console.log(views[view]) } +function showPoster(imageURL, title, quote) { + posterImage.src = imageURL + posterTitle.innerText = title + posterQuote.innerText = quote + + currentPoster = { + imageURL: imageURL, + title: title, + quote: quote + } +} + +function showRandomHomepagePoster() { + posterImage.src = images[getRandomIndex(images)]; + posterTitle.innerText = titles[getRandomIndex(titles)]; + posterQuote.innerText = quotes[getRandomIndex(quotes)]; + + return currentPoster = { + imageURL: posterImage.src, + title: posterTitle.innerText, + quote: posterQuote.innerText + }; +} + function showUserCreatedPoster(event) { event.preventDefault(); @@ -186,9 +199,9 @@ function showUserCreatedPoster(event) { userTitle = userPosterTitle.value, userQuote = userPosterQuote.value; - console.log("User Image:", userImage); - console.log("User Title:", userTitle); - console.log("User Quote:", userQuote); + // console.log("User Image:", userImage); + // console.log("User Title:", userTitle); + // console.log("User Quote:", userQuote); posterImage.src = userImage; posterTitle.innerText = userTitle; @@ -196,9 +209,9 @@ function showUserCreatedPoster(event) { addUserPoster(userImage, userTitle, userQuote); - console.log("Images array:", images); - console.log("Titles array:", titles); - console.log("Quotes array:", quotes); + // console.log("Images array:", images); + // console.log("Titles array:", titles); + // console.log("Quotes array:", quotes); return currentPoster = { imageURL: userImage, From ad782c1d4df436e8b8dd557d97d27e60950484e5 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 12:23:45 -0600 Subject: [PATCH 12/40] feat: refactor showRandomHomepagePoster function --- src/main.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/main.js b/src/main.js index a1fa32c20..d46f39a94 100644 --- a/src/main.js +++ b/src/main.js @@ -181,16 +181,13 @@ function showPoster(imageURL, title, quote) { } function showRandomHomepagePoster() { - posterImage.src = images[getRandomIndex(images)]; - posterTitle.innerText = titles[getRandomIndex(titles)]; - posterQuote.innerText = quotes[getRandomIndex(quotes)]; - - return currentPoster = { - imageURL: posterImage.src, - title: posterTitle.innerText, - quote: posterQuote.innerText + let randomImage = images[getRandomIndex(images)]; + let randomTitle = titles[getRandomIndex(titles)]; + let randomQuote = quotes[getRandomIndex(quotes)]; + + showPoster(randomImage, randomTitle, randomQuote) }; -} + function showUserCreatedPoster(event) { event.preventDefault(); From cec9bad0cfb021a6019572924af3f22f21f3f513 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 12:27:18 -0600 Subject: [PATCH 13/40] refactor: change showUserCreatedPoster for helper --- src/main.js | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/src/main.js b/src/main.js index d46f39a94..29524b8c6 100644 --- a/src/main.js +++ b/src/main.js @@ -192,29 +192,16 @@ function showRandomHomepagePoster() { function showUserCreatedPoster(event) { event.preventDefault(); - let userImage = userPosterImage.value, - userTitle = userPosterTitle.value, - userQuote = userPosterQuote.value; + let userImage = userPosterImage.value + let userTitle = userPosterTitle.value + let userQuote = userPosterQuote.value // console.log("User Image:", userImage); // console.log("User Title:", userTitle); // console.log("User Quote:", userQuote); - posterImage.src = userImage; - posterTitle.innerText = userTitle; - posterQuote.innerText = userQuote; - - addUserPoster(userImage, userTitle, userQuote); - - // console.log("Images array:", images); - // console.log("Titles array:", titles); - // console.log("Quotes array:", quotes); - - return currentPoster = { - imageURL: userImage, - title: userTitle, - quote: userQuote - }; + showPoster(userImage, userTitle, userQuote) + addUserPoster(userImage, userTitle, userQuote) } function addUserPoster(image, title, quote) { From dbc1f0c1859bf06602c0f6f7eed5b80dd980b768 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 13:55:25 -0600 Subject: [PATCH 14/40] feat: save the random generated posters and show them in the view page --- src/main.js | 44 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/src/main.js b/src/main.js index 29524b8c6..20c2b4e5f 100644 --- a/src/main.js +++ b/src/main.js @@ -112,22 +112,25 @@ var showSavedPostersButton = document.querySelector(".show-saved") var showMainPageButton = document.querySelector(".show-main") var backToMainButton = document.querySelector(".back-to-main") var showRandomPosterButton = document.querySelector(".show-random") +var savePosterButton = document.querySelector('.save-poster') +var showRandomPosterButton = document.querySelector(".show-random") +var showUserPosterButton = document.querySelector(".make-poster") var mainPosterViewSection = document.querySelector(".main-poster") var OwnPosterFormSection = document.querySelector(".poster-form") var savedPostersSection = document.querySelector(".saved-posters") -var showRandomPosterButton = document.querySelector(".show-random") -var showUserPosterButton = document.querySelector(".make-poster") +var savedPostersGrid = document.querySelector(".saved-posters-grid") // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) makeOwnPosterButton.addEventListener("click", function() {handleView('form')}) -showSavedPostersButton.addEventListener("click", function() {handleView('saved')}) +showSavedPostersButton.addEventListener("click", function() {handleView('saved'); displaySavedPosters()}) showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main')}) showUserPosterButton.addEventListener("click", function() {handleView('main')}) showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) - +savePosterButton.addEventListener("click", saveCurrentPoster) +// showSavedPostersButton.addEventListener("click", saveCurrentPoster) //the anonymous callback function () used above is for deferring its execution //until the button is acutually clicked. @@ -146,8 +149,6 @@ function createPoster(imageURL, title, quote) { quote: quote} } - - function handleView(view) { const views = { main: mainPosterViewSection, @@ -201,14 +202,41 @@ function showUserCreatedPoster(event) { // console.log("User Quote:", userQuote); showPoster(userImage, userTitle, userQuote) - addUserPoster(userImage, userTitle, userQuote) + addUserPosterInput(userImage, userTitle, userQuote) } -function addUserPoster(image, title, quote) { +function addUserPosterInput(image, title, quote) { images.push(image) titles.push(title) quotes.push(quote) } +function saveCurrentPoster() { + let generatedPoster = savedPosters.find((poster) =>{ + return poster.imageURL === currentPoster.imageURL && + poster.title === currentPoster.title && + poster.quote === currentPoster.quote + }) + if(!generatedPoster) { + savedPosters.push(currentPoster) + console.log("Poster saved:", currentPoster); + console.log("Saved Posters Array:", savedPosters); // Log the array here + } else { + console.log("Poster is already saved"); + } +} +function displaySavedPosters() { + savedPostersGrid.innerHTML = '' //This clears out the savedPostersSection before adding the new ones + + savedPostersGrid.innerHTML = savedPosters.map((poster) => { + return ` +
+ +

${poster.title}

+

${poster.quote}

+
`; + }).join('') //need to use .join b/c map returns an array of strings. An array cant be put into innerHTML. Join turns the array into a string. +} +console.log(savedPosters) From bbc07fd81e1acebd04798d9cb9fc462c0ef2d469 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 14:09:26 -0600 Subject: [PATCH 15/40] fix: make changes for the user created poster is saved into the array also --- src/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main.js b/src/main.js index 20c2b4e5f..dd1e7ce1b 100644 --- a/src/main.js +++ b/src/main.js @@ -202,6 +202,7 @@ function showUserCreatedPoster(event) { // console.log("User Quote:", userQuote); showPoster(userImage, userTitle, userQuote) + // saveCurrentPoster() addUserPosterInput(userImage, userTitle, userQuote) } From 36c49f3e19f220f902f5ff0a54cb90aa3c027ff0 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 14:14:46 -0600 Subject: [PATCH 16/40] fix: modify back to main button event listener --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index dd1e7ce1b..e8839840c 100644 --- a/src/main.js +++ b/src/main.js @@ -125,7 +125,7 @@ window.addEventListener("load", showRandomHomepagePoster) makeOwnPosterButton.addEventListener("click", function() {handleView('form')}) showSavedPostersButton.addEventListener("click", function() {handleView('saved'); displaySavedPosters()}) showMainPageButton.addEventListener("click", function() {handleView('main')}) -backToMainButton.addEventListener("click", function() {handleView('main')}) +backToMainButton.addEventListener("click", function() {handleView('main'); showRandomHomepagePoster()}) showUserPosterButton.addEventListener("click", function() {handleView('main')}) showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) From 7e4310ecda7aa877a3863b2b9295535a406d99c2 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 14:30:32 -0600 Subject: [PATCH 17/40] feat: added mini-poster styling to the innerHTML function --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index e8839840c..09c9120cc 100644 --- a/src/main.js +++ b/src/main.js @@ -232,7 +232,7 @@ function displaySavedPosters() { savedPostersGrid.innerHTML = savedPosters.map((poster) => { return ` -
+

${poster.title}

${poster.quote}

From 4690d2654945b6f8fd169188c19a9ca1f776b606 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 14:34:51 -0600 Subject: [PATCH 18/40] feat: add dataset for unmotivational poster --- src/main.js | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) diff --git a/src/main.js b/src/main.js index 09c9120cc..11e8a2131 100644 --- a/src/main.js +++ b/src/main.js @@ -97,6 +97,129 @@ var quotes = [ "Each person must live their life as a model for others.", "A champion is defined not by their wins but by how they can recover when they fall." ]; +let unmotivationalPosters = [ + { + name: "FAILURE", + description: "Why bother trying? It's probably not worth it.", + price: 68.00, + year: 2019, + vintage: true, + img_url: "./assets/failure.jpg", + }, + { + name: "MEDIOCRITY", + description: "Dreams are just thatβ€”dreams.", + price: 127.00, + year: 2021, + vintage: false, + img_url: "./assets/mediocrity.jpg", + }, + { + name: "REGRET", + description: "Hard work rarely pays off.", + price: 89.00, + year: 2018, + vintage: true, + img_url: "./assets/regret.jpg", + }, + { + name: "FUTILITY", + description: "You're not good enough.", + price: 150.00, + year: 2016, + vintage: false, + img_url: "./assets/futility.jpg", + }, + { + name: "DEFEAT", + description: "It's too late to start now.", + price: 35.00, + year: 2023, + vintage: false, + img_url: "./assets/defeat.jpg", + }, + { + name: "HOPELESSNESS", + description: "Stay in your comfort zone; it's safer.", + price: 112.00, + year: 2020, + vintage: true, + img_url: "./assets/hopelessness.jpg", + }, + { + name: "LAZINESS", + description: "You can't change anything.", + price: 25.00, + year: 2022, + vintage: false, + img_url: "./assets/laziness.jpg", + }, + { + name: "PROCRASTINATION", + description: "Better to avoid failure by not trying at all.", + price: 48.00, + year: 2017, + vintage: true, + img_url: "./assets/procrastination.jpg", + }, + { + name: "DESPAIR", + description: "Let someone else do it; you’ll just mess it up.", + price: 73.00, + year: 2015, + vintage: false, + img_url: "./assets/despair.jpg", + }, + { + name: "NEGLECT", + description: "Happiness is overrated.", + price: 160.00, + year: 2019, + vintage: true, + img_url: "./assets/neglect.jpg", + }, + { + name: "FEAR", + description: "Giving up is always an option.", + price: 91.00, + year: 2014, + vintage: false, + img_url: "./assets/fear.jpg", + }, + { + name: "APATHY", + description: "No one cares about your effort.", + price: 110.00, + year: 2016, + vintage: true, + img_url: "./assets/apathy.jpg", + }, + { + name: "MISERY", + description: "Why take risks when you can stay stagnant?", + price: 55.00, + year: 2021, + vintage: false, + img_url: "./assets/misery.jpg", + }, + { + name: "BLAME", + description: "Expect disappointment and you'll never be disappointed.", + price: 39.00, + year: 2017, + vintage: true, + img_url: "./assets/blame.jpg", + }, + { + name: "DOUBT", + description: "Success is for other people, not you.", + price: 140.00, + year: 2020, + vintage: false, + img_url: "./assets/doubt.jpg", + } +]; + var savedPosters = []; var currentPoster; From 1da717efb21a35a791bb1bc76dc1171e18ef696d Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 14:55:35 -0600 Subject: [PATCH 19/40] feat: create unmotivational poster button and functionality --- index.html | 6 ++++++ src/main.js | 16 +++++++++++----- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ca0707621..1079ac94f 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@

Quote

+ + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 11e8a2131..dcda8b0fb 100644 --- a/src/main.js +++ b/src/main.js @@ -230,6 +230,10 @@ var posterQuote = document.querySelector(".poster-quote") var userPosterImage = document.querySelector("#poster-image-url") var userPosterTitle = document.querySelector("#poster-title") var userPosterQuote = document.querySelector("#poster-quote") +var mainPosterViewSection = document.querySelector(".main-poster") +var OwnPosterFormSection = document.querySelector(".poster-form") +var savedPostersSection = document.querySelector(".saved-posters") +var savedPostersGrid = document.querySelector(".saved-posters-grid") var makeOwnPosterButton = document.querySelector(".show-form") var showSavedPostersButton = document.querySelector(".show-saved") var showMainPageButton = document.querySelector(".show-main") @@ -238,10 +242,9 @@ var showRandomPosterButton = document.querySelector(".show-random") var savePosterButton = document.querySelector('.save-poster') var showRandomPosterButton = document.querySelector(".show-random") var showUserPosterButton = document.querySelector(".make-poster") -var mainPosterViewSection = document.querySelector(".main-poster") -var OwnPosterFormSection = document.querySelector(".poster-form") -var savedPostersSection = document.querySelector(".saved-posters") -var savedPostersGrid = document.querySelector(".saved-posters-grid") +var showUnmotivationalPostersButton = document.querySelector(".show-unmotivational") +var unmotivationalPostersSection = document.querySelector(".unmotivational-section") + // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) @@ -250,9 +253,11 @@ showSavedPostersButton.addEventListener("click", function() {handleView('saved') showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main'); showRandomHomepagePoster()}) showUserPosterButton.addEventListener("click", function() {handleView('main')}) +showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational')})//need to add a section to handleView function showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) + // showSavedPostersButton.addEventListener("click", saveCurrentPoster) //the anonymous callback function () used above is for deferring its execution @@ -276,7 +281,8 @@ function handleView(view) { const views = { main: mainPosterViewSection, form: OwnPosterFormSection, - saved: savedPostersSection + saved: savedPostersSection, + unmotivational: unmotivationalPostersSection } //this object above links the keys to the dom elements (via the query selectors) From 8e531442665b80d1a807a8010b5a8d68def831c6 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Wed, 9 Oct 2024 15:04:12 -0600 Subject: [PATCH 20/40] feat: add button functionality from unmotivational to main --- index.html | 2 +- src/main.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 1079ac94f..9aefd2049 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@

Saved Posters

diff --git a/src/main.js b/src/main.js index dcda8b0fb..1c790767e 100644 --- a/src/main.js +++ b/src/main.js @@ -238,6 +238,7 @@ var makeOwnPosterButton = document.querySelector(".show-form") var showSavedPostersButton = document.querySelector(".show-saved") var showMainPageButton = document.querySelector(".show-main") var backToMainButton = document.querySelector(".back-to-main") +var backToMainFromUnmotivationalButton = document.querySelector(".back-to-main-from-unmotivational") var showRandomPosterButton = document.querySelector(".show-random") var savePosterButton = document.querySelector('.save-poster') var showRandomPosterButton = document.querySelector(".show-random") @@ -253,11 +254,13 @@ showSavedPostersButton.addEventListener("click", function() {handleView('saved') showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main'); showRandomHomepagePoster()}) showUserPosterButton.addEventListener("click", function() {handleView('main')}) +backToMainFromUnmotivationalButton.addEventListener("click", function() {handleView('main')})//possible refactor. all back to main buttons linked showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational')})//need to add a section to handleView function showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) + // showSavedPostersButton.addEventListener("click", saveCurrentPoster) //the anonymous callback function () used above is for deferring its execution From ad3e1575d5e84ba87ed5ce3cc3ab44ca61299fb1 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Thu, 10 Oct 2024 13:54:03 -0600 Subject: [PATCH 21/40] feat: clean the unmotivational poster array with new function --- src/main.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/main.js b/src/main.js index 1c790767e..333f874d4 100644 --- a/src/main.js +++ b/src/main.js @@ -246,7 +246,6 @@ var showUserPosterButton = document.querySelector(".make-poster") var showUnmotivationalPostersButton = document.querySelector(".show-unmotivational") var unmotivationalPostersSection = document.querySelector(".unmotivational-section") - // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) makeOwnPosterButton.addEventListener("click", function() {handleView('form')}) @@ -260,13 +259,11 @@ showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) - // showSavedPostersButton.addEventListener("click", saveCurrentPoster) //the anonymous callback function () used above is for deferring its execution //until the button is acutually clicked. - // functions and event handlers go here πŸ‘‡ function getRandomIndex(array) { return Math.floor(Math.random() * array.length); @@ -321,7 +318,6 @@ function showRandomHomepagePoster() { showPoster(randomImage, randomTitle, randomQuote) }; - function showUserCreatedPoster(event) { event.preventDefault(); @@ -373,3 +369,16 @@ function displaySavedPosters() { } console.log(savedPosters) + +function cleanData(posters) { + const newData = posters.map((poster) => { + return { + imageURL:poster.img_url, + title: poster.name, + quote: poster.description, + } + }) + return newData +} +// console.log(cleanData(unmotivationalPosters)) + From a473e0b15527bbcb109c32dd7d5181f60445d3b9 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Thu, 10 Oct 2024 13:54:34 -0600 Subject: [PATCH 22/40] feat: display the unmotivational posters with new function --- src/main.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/main.js b/src/main.js index 333f874d4..a752dba05 100644 --- a/src/main.js +++ b/src/main.js @@ -382,3 +382,14 @@ function cleanData(posters) { } // console.log(cleanData(unmotivationalPosters)) +function displayCleanedPosters() { + unmotivationalPostersSection.innerHTML = cleanData(posters).map((poster) => { + return ` +
+ +

${poster.title}

+

${poster.quote}

+
` + }).join('') +} +console.log(displayCleanedPosters(unmotivationalPosters)) \ No newline at end of file From 09c25e5392c150bbac40e86cac51c539969c3d17 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Thu, 10 Oct 2024 13:58:09 -0600 Subject: [PATCH 23/40] fix: add the perameter to accept the posters array in displayCleanedPosters --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index a752dba05..64bbdfdc9 100644 --- a/src/main.js +++ b/src/main.js @@ -382,7 +382,7 @@ function cleanData(posters) { } // console.log(cleanData(unmotivationalPosters)) -function displayCleanedPosters() { +function displayCleanedPosters(posters) { unmotivationalPostersSection.innerHTML = cleanData(posters).map((poster) => { return `
From 4de5c6deab2856216ab8b68449718cefdc31f1b4 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Thu, 10 Oct 2024 14:16:15 -0600 Subject: [PATCH 24/40] feat: make the unmotivational cleaned posters array global --- src/main.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/main.js b/src/main.js index 64bbdfdc9..2cf0c58ca 100644 --- a/src/main.js +++ b/src/main.js @@ -221,6 +221,7 @@ let unmotivationalPosters = [ ]; var savedPosters = []; +var cleanedPosters = []; var currentPoster; // query selector variables go here πŸ‘‡ @@ -371,16 +372,16 @@ function displaySavedPosters() { console.log(savedPosters) function cleanData(posters) { - const newData = posters.map((poster) => { + cleanedPosters = posters.map((poster) => { return { imageURL:poster.img_url, title: poster.name, quote: poster.description, } }) - return newData + return cleanedPosters } -// console.log(cleanData(unmotivationalPosters)) +console.log(cleanData(unmotivationalPosters)) function displayCleanedPosters(posters) { unmotivationalPostersSection.innerHTML = cleanData(posters).map((poster) => { @@ -392,4 +393,7 @@ function displayCleanedPosters(posters) {
` }).join('') } -console.log(displayCleanedPosters(unmotivationalPosters)) \ No newline at end of file +console.log(displayCleanedPosters(unmotivationalPosters)) + + + From 2097dbd0109af20b1183a58c4923eb2f52cb6b26 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Thu, 10 Oct 2024 15:50:21 -0600 Subject: [PATCH 25/40] feat: delete a double clicked unmotivational poster --- index.html | 2 +- src/main.js | 39 +++++++++++++++++++++++++++++++-------- styles.css | 10 +++++++++- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 9aefd2049..99a9a8526 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@

Saved Posters

diff --git a/src/main.js b/src/main.js index 2cf0c58ca..1e8493d95 100644 --- a/src/main.js +++ b/src/main.js @@ -246,6 +246,8 @@ var showRandomPosterButton = document.querySelector(".show-random") var showUserPosterButton = document.querySelector(".make-poster") var showUnmotivationalPostersButton = document.querySelector(".show-unmotivational") var unmotivationalPostersSection = document.querySelector(".unmotivational-section") +var unmotivationalGrid = document.querySelector("#unmotivational-grid") +// var deleteAPoster = document.querySelector(".mini-poster") // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) @@ -255,10 +257,13 @@ showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main'); showRandomHomepagePoster()}) showUserPosterButton.addEventListener("click", function() {handleView('main')}) backToMainFromUnmotivationalButton.addEventListener("click", function() {handleView('main')})//possible refactor. all back to main buttons linked -showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational')})//need to add a section to handleView function +showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational')}) showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) +// unmotivationalGrid.addEventListener("dblclick", deleteUnmotivationalPoster) //the dblclick is attacvhed to the parent container (#unmotivational-grid) +// deleteAPoster.addEventListener("dblclick", deleteUnmotivationalPoster) +unmotivationalPostersSection.addEventListener("dblclick", deleteUnmotivationalPoster) // showSavedPostersButton.addEventListener("click", saveCurrentPoster) @@ -349,10 +354,10 @@ function saveCurrentPoster() { }) if(!generatedPoster) { savedPosters.push(currentPoster) - console.log("Poster saved:", currentPoster); - console.log("Saved Posters Array:", savedPosters); // Log the array here + // console.log("Poster saved:", currentPoster); + // console.log("Saved Posters Array:", savedPosters); } else { - console.log("Poster is already saved"); + // console.log("Poster is already saved"); } } @@ -384,16 +389,34 @@ function cleanData(posters) { console.log(cleanData(unmotivationalPosters)) function displayCleanedPosters(posters) { - unmotivationalPostersSection.innerHTML = cleanData(posters).map((poster) => { - return ` -
+ unmotivationalPostersSection.innerHTML = cleanData(posters).map((poster, index) => { //added the index here + return ` +

${poster.title}

${poster.quote}

` - }).join('') + }).join('') //ABOVE: the index is identfying each unique poster (by name) so that it can specifically be deleted. } console.log(displayCleanedPosters(unmotivationalPosters)) +//Delete an unmotivational poster +//set up event listener and query selectors globally +//render the poster +// + +function deleteUnmotivationalPoster(event) { + if (event.target.closest(".mini-poster")) { + + const posterToDelete = event.target.closest(".mini-poster") + const posterId = posterToDelete.getAttribute("data-id") + unmotivationalPosters.splice(posterId, 1) + displayCleanedPosters(unmotivationalPosters) + } +} +//when a .mini-poster is double clicked the event handler checks if the target is inside a .mini-poster div +//event.target.closest is a method used to find the nearest parent .mini-poster of the clicked area +//when clicked the poster is removed from the array (unmotivational posters) using splice +//call the displayCleanedPosters function again to refresh the display and auto-update \ No newline at end of file diff --git a/styles.css b/styles.css index 0402eaee9..ebe5a48ee 100644 --- a/styles.css +++ b/styles.css @@ -107,26 +107,34 @@ button:hover { /* ~~~~~ SAVED POSTER SECTION ~~~~~ */ .saved-posters { padding: 40px; + border: red; } -.saved-posters-grid { +.saved-posters-grid .unmotivational-section { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; padding: 20px; + border: red; } +/* .unmotivational-section { + border: red; +} */ + .mini-poster { background: black; color: white; height: 340px; padding: 25px; width: 425px; + border: red; } .mini-poster img { height:200px; width: 300px; + border: red; } .mini-poster h2, From 9da20499ca934f04f77bf985aad39328fbed262b Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Thu, 10 Oct 2024 15:56:34 -0600 Subject: [PATCH 26/40] fix: reference the correct element to both show the page and unmotivational posters --- src/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index 1e8493d95..3f893d145 100644 --- a/src/main.js +++ b/src/main.js @@ -261,7 +261,7 @@ showUnmotivationalPostersButton.addEventListener("click", function() {handleView showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) -// unmotivationalGrid.addEventListener("dblclick", deleteUnmotivationalPoster) //the dblclick is attacvhed to the parent container (#unmotivational-grid) +unmotivationalGrid.addEventListener("dblclick", deleteUnmotivationalPoster) //the dblclick is attacvhed to the parent container (#unmotivational-grid) // deleteAPoster.addEventListener("dblclick", deleteUnmotivationalPoster) unmotivationalPostersSection.addEventListener("dblclick", deleteUnmotivationalPoster) @@ -389,7 +389,7 @@ function cleanData(posters) { console.log(cleanData(unmotivationalPosters)) function displayCleanedPosters(posters) { - unmotivationalPostersSection.innerHTML = cleanData(posters).map((poster, index) => { //added the index here + unmotivationalGrid.innerHTML = cleanData(posters).map((poster, index) => { //added the index here return `
From 97174ead57defa424589177aeffcd684908ba7fb Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Thu, 10 Oct 2024 16:29:48 -0600 Subject: [PATCH 27/40] refactor: change the deleteUnmotivationalPoster function and make the posters removed locally instead of globally --- src/main.js | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/src/main.js b/src/main.js index 3f893d145..937570f60 100644 --- a/src/main.js +++ b/src/main.js @@ -221,7 +221,6 @@ let unmotivationalPosters = [ ]; var savedPosters = []; -var cleanedPosters = []; var currentPoster; // query selector variables go here πŸ‘‡ @@ -257,7 +256,20 @@ showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main'); showRandomHomepagePoster()}) showUserPosterButton.addEventListener("click", function() {handleView('main')}) backToMainFromUnmotivationalButton.addEventListener("click", function() {handleView('main')})//possible refactor. all back to main buttons linked -showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational')}) +// showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational'); +// let cleanedData = cleanData(unmotivationalPosters); +// displayCleanedPosters(cleanedData) +// console.log("Displaying cleaned posters after button click:", cleanedData) +// }) +showUnmotivationalPostersButton.addEventListener("click", function() { + handleView('unmotivational'); + + let cleanedData = cleanData(unmotivationalPosters); // Clean the data once + displayCleanedPosters(cleanedData); // Pass cleaned data directly for rendering + + console.log("Displaying cleaned posters after button click:", cleanedData); // Log cleaned data for verification +}); + showUserPosterButton.addEventListener("click", showUserCreatedPoster) showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) @@ -377,19 +389,21 @@ function displaySavedPosters() { console.log(savedPosters) function cleanData(posters) { - cleanedPosters = posters.map((poster) => { + let cleanedData = posters.map((poster) => { return { imageURL:poster.img_url, title: poster.name, quote: poster.description, } }) - return cleanedPosters + console.log("Cleaned Data:", cleanedData) + return cleanedData } -console.log(cleanData(unmotivationalPosters)) +// console.log(cleanData(unmotivationalPosters)) function displayCleanedPosters(posters) { - unmotivationalGrid.innerHTML = cleanData(posters).map((poster, index) => { //added the index here + console.log("Rendering the following posters:", posters) + unmotivationalGrid.innerHTML = posters.map((poster, index) => { //added the index here return `
@@ -398,7 +412,7 @@ function displayCleanedPosters(posters) {
` }).join('') //ABOVE: the index is identfying each unique poster (by name) so that it can specifically be deleted. } -console.log(displayCleanedPosters(unmotivationalPosters)) +// console.log(displayCleanedPosters(unmotivationalPosters)) //Delete an unmotivational poster //set up event listener and query selectors globally @@ -406,16 +420,24 @@ console.log(displayCleanedPosters(unmotivationalPosters)) // function deleteUnmotivationalPoster(event) { - if (event.target.closest(".mini-poster")) { + const posterElement = event.target.closest(".mini-poster"); - const posterToDelete = event.target.closest(".mini-poster") - const posterId = posterToDelete.getAttribute("data-id") + if (posterElement) { + const posterId = parseInt(posterElement.getAttribute("data-id")); // Get the data-id from the element + console.log("Deleting poster with ID:", posterId); - unmotivationalPosters.splice(posterId, 1) + unmotivationalPosters.splice(posterId, 1); - displayCleanedPosters(unmotivationalPosters) + // Re-render the cleaned posters after deleting the selected one + // Clean the updated array + let cleanedData = cleanData(unmotivationalPosters); + displayCleanedPosters(cleanedData); +// Re-display the posters + console.log("Unmotivational posters after deletion:", unmotivationalPosters); } } + + //when a .mini-poster is double clicked the event handler checks if the target is inside a .mini-poster div //event.target.closest is a method used to find the nearest parent .mini-poster of the clicked area //when clicked the poster is removed from the array (unmotivational posters) using splice From cb26186e02dfbd2f5ff3ce911ece918dfa7d3973 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 11:16:36 -0600 Subject: [PATCH 28/40] feat: apply flexbox to the saved posters grid element --- styles.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/styles.css b/styles.css index ebe5a48ee..86e047a88 100644 --- a/styles.css +++ b/styles.css @@ -108,14 +108,14 @@ button:hover { .saved-posters { padding: 40px; border: red; + } -.saved-posters-grid .unmotivational-section { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 20px; - padding: 20px; - border: red; +.saved-posters-grid { + display: flex; + flex-wrap: wrap; /* Allows wrapping of mini-posters if needed */ + justify-content: center; /* Center the mini-posters */ + gap: 20px; /* Optional: Adjust the gap between posters */ } /* .unmotivational-section { From aa03cc38a33b3386eceb603f961d6287051413c1 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 12:11:07 -0600 Subject: [PATCH 29/40] feat: add flexbox to posters sections and styling to unmotivational posters --- src/main.js | 2 +- styles.css | 29 +++++++++++++++++++---------- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/main.js b/src/main.js index 937570f60..c580a833c 100644 --- a/src/main.js +++ b/src/main.js @@ -405,7 +405,7 @@ function displayCleanedPosters(posters) { console.log("Rendering the following posters:", posters) unmotivationalGrid.innerHTML = posters.map((poster, index) => { //added the index here return ` -
+

${poster.title}

${poster.quote}

diff --git a/styles.css b/styles.css index 86e047a88..d38b4ddd7 100644 --- a/styles.css +++ b/styles.css @@ -84,6 +84,10 @@ button:hover { margin-bottom: 30px; } +h2 { + margin-bottom: 20px; +} + .poster-form form { align-content: center; display: flex; @@ -107,20 +111,18 @@ button:hover { /* ~~~~~ SAVED POSTER SECTION ~~~~~ */ .saved-posters { padding: 40px; - border: red; - } .saved-posters-grid { display: flex; - flex-wrap: wrap; /* Allows wrapping of mini-posters if needed */ - justify-content: center; /* Center the mini-posters */ - gap: 20px; /* Optional: Adjust the gap between posters */ + flex-wrap: wrap; + justify-content: center; + gap: 8px; } -/* .unmotivational-section { - border: red; -} */ +.back-to-main, .back-to-main-from-unmotivational { + margin-top: 20px; +} .mini-poster { background: black; @@ -128,13 +130,20 @@ button:hover { height: 340px; padding: 25px; width: 425px; - border: red; +} + +.mini-poster-unmotivational { + background: rgb(84, 83, 83); + border-radius: 10px; + color: white; + height: 340px; + padding: 25px; + width: 425px; } .mini-poster img { height:200px; width: 300px; - border: red; } .mini-poster h2, From 51622defcb0e7637198b2317ce2edc7990c3292d Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 12:55:40 -0600 Subject: [PATCH 30/40] fix: adjust spacing of title and quote on unmotivational mini posters --- src/main.js | 6 +++--- styles.css | 41 ++++++++++++++++++++++++++++++++--------- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/src/main.js b/src/main.js index c580a833c..bc317d2c4 100644 --- a/src/main.js +++ b/src/main.js @@ -406,9 +406,9 @@ function displayCleanedPosters(posters) { unmotivationalGrid.innerHTML = posters.map((poster, index) => { //added the index here return `
- -

${poster.title}

-

${poster.quote}

+ +

${poster.title}

+

${poster.quote}

` }).join('') //ABOVE: the index is identfying each unique poster (by name) so that it can specifically be deleted. } diff --git a/styles.css b/styles.css index d38b4ddd7..6dd7d6a21 100644 --- a/styles.css +++ b/styles.css @@ -132,15 +132,6 @@ h2 { width: 425px; } -.mini-poster-unmotivational { - background: rgb(84, 83, 83); - border-radius: 10px; - color: white; - height: 340px; - padding: 25px; - width: 425px; -} - .mini-poster img { height:200px; width: 300px; @@ -161,3 +152,35 @@ h2 { margin-bottom: 10px; text-transform: uppercase; } + +/* ~~~~~ UNMOTIVATIONAL POSTER SECTION ~~~~~ */ +.unmotivational-section .poster-title-unmotivational { + color: black; +} + +.mini-poster-unmotivational:hover .poster-title-unmotivational { + color: rgb(146, 55, 55); +} + +.mini-poster-unmotivational:hover { + background: rgb(34, 34, 34); + box-shadow: 0 0 40px rgb(146, 55, 55); + transition: box-shadow 0.3s ease; +} + +.mini-poster-unmotivational { + background: rgb(84, 83, 83); + border-radius: 10px; + color: white; + height: 340px; + padding: 25px; + width: 425px; +} + +.mini-poster-unmotivational .poster-title { + margin-top: 20px; /* Adjust this value as needed */ +} + +.mini-poster-unmotivational .poster-quote { + margin-top: 10px; /* Adjust this value as needed */ +} \ No newline at end of file From c5e0b86ccd37ccea8313c9d350741e5eb77e3d13 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 12:57:08 -0600 Subject: [PATCH 31/40] FEAT: complete the project without additional features. comment cleanup needed --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 6dd7d6a21..b493921ff 100644 --- a/styles.css +++ b/styles.css @@ -158,7 +158,7 @@ h2 { color: black; } -.mini-poster-unmotivational:hover .poster-title-unmotivational { +/* .mini-poster-unmotivational:hover .poster-title-unmotivational { color: rgb(146, 55, 55); } @@ -166,7 +166,7 @@ h2 { background: rgb(34, 34, 34); box-shadow: 0 0 40px rgb(146, 55, 55); transition: box-shadow 0.3s ease; -} +} */ .mini-poster-unmotivational { background: rgb(84, 83, 83); From e876b49588e1e8c99f6139257d2e198409e1bc78 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 13:01:43 -0600 Subject: [PATCH 32/40] feat: be the final project with comments still included --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index b493921ff..c19ef13a8 100644 --- a/styles.css +++ b/styles.css @@ -178,9 +178,9 @@ h2 { } .mini-poster-unmotivational .poster-title { - margin-top: 20px; /* Adjust this value as needed */ + margin-top: 20px; } .mini-poster-unmotivational .poster-quote { - margin-top: 10px; /* Adjust this value as needed */ + margin-top: 10px; } \ No newline at end of file From 74d91f8e9d0a151e1547ddd25bb1b88b4230bb70 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 13:11:35 -0600 Subject: [PATCH 33/40] feat: hover effect on unmotivational posters --- styles.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/styles.css b/styles.css index c19ef13a8..ce51977b2 100644 --- a/styles.css +++ b/styles.css @@ -158,18 +158,18 @@ h2 { color: black; } -/* .mini-poster-unmotivational:hover .poster-title-unmotivational { - color: rgb(146, 55, 55); +.mini-poster-unmotivational:hover .poster-title-unmotivational { + color: rgb(189, 48, 48); } .mini-poster-unmotivational:hover { - background: rgb(34, 34, 34); - box-shadow: 0 0 40px rgb(146, 55, 55); + background: rgb(61, 60, 60); + box-shadow: 0 0 40px rgb(189, 48, 48); transition: box-shadow 0.3s ease; -} */ +} .mini-poster-unmotivational { - background: rgb(84, 83, 83); + background: rgb(139, 137, 137); border-radius: 10px; color: white; height: 340px; From 7b14ee3693b88987957b1ac57b529569225b8955 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 15:52:17 -0600 Subject: [PATCH 34/40] refactor: saveCurrentPoster function --- src/main.js | 18 ++++++++++-------- styles.css | 4 ++-- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/main.js b/src/main.js index bc317d2c4..bb83ac650 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,6 @@ // we've provided you with some data to work with πŸ‘‡ // tip: you can tuck this data out of view with the dropdown found near the line number where the variable is declared -var images = [ +const images = [ "./assets/bees.jpg", "./assets/bridge.jpg", "./assets/butterfly.jpg", @@ -20,7 +20,7 @@ var images = [ "./assets/tiger.jpg", "./assets/turtle.jpg" ]; -var titles = [ +const titles = [ "determination", "success", "inspiration", @@ -57,7 +57,7 @@ var titles = [ "understanding", "wisdom" ]; -var quotes = [ +const quotes = [ "Don’t downgrade your dream just to fit your reality, upgrade your conviction to match your destiny.", "You are braver than you believe, stronger than you seem and smarter than you think.", "You are confined only by the walls you build yourself.", @@ -241,7 +241,6 @@ var backToMainButton = document.querySelector(".back-to-main") var backToMainFromUnmotivationalButton = document.querySelector(".back-to-main-from-unmotivational") var showRandomPosterButton = document.querySelector(".show-random") var savePosterButton = document.querySelector('.save-poster') -var showRandomPosterButton = document.querySelector(".show-random") var showUserPosterButton = document.querySelector(".make-poster") var showUnmotivationalPostersButton = document.querySelector(".show-unmotivational") var unmotivationalPostersSection = document.querySelector(".unmotivational-section") @@ -359,12 +358,13 @@ function addUserPosterInput(image, title, quote) { } function saveCurrentPoster() { - let generatedPoster = savedPosters.find((poster) =>{ + +if (!savedPosters.some((poster) => { return poster.imageURL === currentPoster.imageURL && poster.title === currentPoster.title && poster.quote === currentPoster.quote - }) - if(!generatedPoster) { + })) { + savedPosters.push(currentPoster) // console.log("Poster saved:", currentPoster); // console.log("Saved Posters Array:", savedPosters); @@ -423,7 +423,9 @@ function deleteUnmotivationalPoster(event) { const posterElement = event.target.closest(".mini-poster"); if (posterElement) { - const posterId = parseInt(posterElement.getAttribute("data-id")); // Get the data-id from the element + const posterId = parseInt(posterElement.getAttribute("data-id")); + // Get the data-id from the element + //parseInt to convert a string to an integer console.log("Deleting poster with ID:", posterId); unmotivationalPosters.splice(posterId, 1); diff --git a/styles.css b/styles.css index ce51977b2..0ddddb8c4 100644 --- a/styles.css +++ b/styles.css @@ -159,11 +159,11 @@ h2 { } .mini-poster-unmotivational:hover .poster-title-unmotivational { - color: rgb(189, 48, 48); + color: rgb(105, 27, 27); } .mini-poster-unmotivational:hover { - background: rgb(61, 60, 60); + background: rgb(104, 102, 102); box-shadow: 0 0 40px rgb(189, 48, 48); transition: box-shadow 0.3s ease; } From 33fc4031fde8c3cc0bd6b78c00b383e9ffc81a17 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 16:30:23 -0600 Subject: [PATCH 35/40] refactor: clean up duplicate and unnecessary code --- src/main.js | 40 +++------------------------------------- 1 file changed, 3 insertions(+), 37 deletions(-) diff --git a/src/main.js b/src/main.js index bb83ac650..3fd4809ac 100644 --- a/src/main.js +++ b/src/main.js @@ -253,31 +253,14 @@ makeOwnPosterButton.addEventListener("click", function() {handleView('form')}) showSavedPostersButton.addEventListener("click", function() {handleView('saved'); displaySavedPosters()}) showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main'); showRandomHomepagePoster()}) -showUserPosterButton.addEventListener("click", function() {handleView('main')}) +showUserPosterButton.addEventListener("click", function() {handleView('main'); showUserCreatedPoster(event)}) backToMainFromUnmotivationalButton.addEventListener("click", function() {handleView('main')})//possible refactor. all back to main buttons linked -// showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational'); -// let cleanedData = cleanData(unmotivationalPosters); -// displayCleanedPosters(cleanedData) -// console.log("Displaying cleaned posters after button click:", cleanedData) -// }) -showUnmotivationalPostersButton.addEventListener("click", function() { - handleView('unmotivational'); - - let cleanedData = cleanData(unmotivationalPosters); // Clean the data once - displayCleanedPosters(cleanedData); // Pass cleaned data directly for rendering - - console.log("Displaying cleaned posters after button click:", cleanedData); // Log cleaned data for verification -}); - -showUserPosterButton.addEventListener("click", showUserCreatedPoster) +showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational'); displayCleanedPosters (cleanData(unmotivationalPosters))}); // Pass cleaned data to this display function for rendering showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) unmotivationalGrid.addEventListener("dblclick", deleteUnmotivationalPoster) //the dblclick is attacvhed to the parent container (#unmotivational-grid) -// deleteAPoster.addEventListener("dblclick", deleteUnmotivationalPoster) unmotivationalPostersSection.addEventListener("dblclick", deleteUnmotivationalPoster) -// showSavedPostersButton.addEventListener("click", saveCurrentPoster) - //the anonymous callback function () used above is for deferring its execution //until the button is acutually clicked. @@ -342,12 +325,7 @@ function showUserCreatedPoster(event) { let userTitle = userPosterTitle.value let userQuote = userPosterQuote.value - // console.log("User Image:", userImage); - // console.log("User Title:", userTitle); - // console.log("User Quote:", userQuote); - showPoster(userImage, userTitle, userQuote) - // saveCurrentPoster() addUserPosterInput(userImage, userTitle, userQuote) } @@ -358,13 +336,11 @@ function addUserPosterInput(image, title, quote) { } function saveCurrentPoster() { - if (!savedPosters.some((poster) => { return poster.imageURL === currentPoster.imageURL && poster.title === currentPoster.title && poster.quote === currentPoster.quote })) { - savedPosters.push(currentPoster) // console.log("Poster saved:", currentPoster); // console.log("Saved Posters Array:", savedPosters); @@ -374,8 +350,6 @@ if (!savedPosters.some((poster) => { } function displaySavedPosters() { - savedPostersGrid.innerHTML = '' //This clears out the savedPostersSection before adding the new ones - savedPostersGrid.innerHTML = savedPosters.map((poster) => { return `
@@ -386,8 +360,6 @@ function displaySavedPosters() { }).join('') //need to use .join b/c map returns an array of strings. An array cant be put into innerHTML. Join turns the array into a string. } -console.log(savedPosters) - function cleanData(posters) { let cleanedData = posters.map((poster) => { return { @@ -396,7 +368,7 @@ function cleanData(posters) { quote: poster.description, } }) - console.log("Cleaned Data:", cleanedData) + // console.log("Cleaned Data:", cleanedData) return cleanedData } // console.log(cleanData(unmotivationalPosters)) @@ -414,11 +386,6 @@ function displayCleanedPosters(posters) { } // console.log(displayCleanedPosters(unmotivationalPosters)) -//Delete an unmotivational poster -//set up event listener and query selectors globally -//render the poster -// - function deleteUnmotivationalPoster(event) { const posterElement = event.target.closest(".mini-poster"); @@ -439,7 +406,6 @@ function deleteUnmotivationalPoster(event) { } } - //when a .mini-poster is double clicked the event handler checks if the target is inside a .mini-poster div //event.target.closest is a method used to find the nearest parent .mini-poster of the clicked area //when clicked the poster is removed from the array (unmotivational posters) using splice From a16d241a69b36f73edc2c9ae0f402943ab0e84f1 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Fri, 11 Oct 2024 16:39:29 -0600 Subject: [PATCH 36/40] feat: add botton hover changes --- src/main.js | 2 +- styles.css | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index 3fd4809ac..aa59b7f09 100644 --- a/src/main.js +++ b/src/main.js @@ -393,7 +393,7 @@ function deleteUnmotivationalPoster(event) { const posterId = parseInt(posterElement.getAttribute("data-id")); // Get the data-id from the element //parseInt to convert a string to an integer - console.log("Deleting poster with ID:", posterId); + console.log("Deleting poster with ID:", posterId); unmotivationalPosters.splice(posterId, 1); diff --git a/styles.css b/styles.css index 0ddddb8c4..0d772df06 100644 --- a/styles.css +++ b/styles.css @@ -26,7 +26,10 @@ button { } button:hover { - background: darkslateblue; + background: rgb(150, 137, 236); + transform: scale(1.05); + color: black; + } .hidden { From 8bdf6a27a1b51890f49d4a9015161a18ae1b45d7 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Sat, 12 Oct 2024 13:52:44 -0600 Subject: [PATCH 37/40] feat: add a duplicate user message in html --- index.html | 1 + src/main.js | 15 +++++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 99a9a8526..be26bcc37 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@

Title

Quote

+ diff --git a/src/main.js b/src/main.js index aa59b7f09..1b13f3340 100644 --- a/src/main.js +++ b/src/main.js @@ -255,14 +255,17 @@ showMainPageButton.addEventListener("click", function() {handleView('main')}) backToMainButton.addEventListener("click", function() {handleView('main'); showRandomHomepagePoster()}) showUserPosterButton.addEventListener("click", function() {handleView('main'); showUserCreatedPoster(event)}) backToMainFromUnmotivationalButton.addEventListener("click", function() {handleView('main')})//possible refactor. all back to main buttons linked -showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational'); displayCleanedPosters (cleanData(unmotivationalPosters))}); // Pass cleaned data to this display function for rendering +showUnmotivationalPostersButton.addEventListener("click", function() {handleView('unmotivational'); displayCleanedPosters (cleanData(unmotivationalPosters))}); +//When this button is clicked the following happens: +//1. the unmotivational page view is rendered (from the handle view function) +//2. the cleanData function processes each poster (from the unmotivationalPosters array) with a cleaned version. +//3. That cleaned data is passed as an argument to the displayCleanedPosters function showRandomPosterButton.addEventListener("click", showRandomHomepagePoster) savePosterButton.addEventListener("click", saveCurrentPoster) unmotivationalGrid.addEventListener("dblclick", deleteUnmotivationalPoster) //the dblclick is attacvhed to the parent container (#unmotivational-grid) unmotivationalPostersSection.addEventListener("dblclick", deleteUnmotivationalPoster) -//the anonymous callback function () used above is for deferring its execution -//until the button is acutually clicked. +//function(): when the button is clicked, the anonymous callback function() is executed. the anonymous callback function keeps the other functions from being run until the button is acutually clicked. // functions and event handlers go here πŸ‘‡ function getRandomIndex(array) { @@ -335,8 +338,8 @@ function addUserPosterInput(image, title, quote) { quotes.push(quote) } -function saveCurrentPoster() { -if (!savedPosters.some((poster) => { +function saveCurrentPoster() { //.some checks if there is already a poster in the array with the same image, title, and quote as the currentPoster +if (!savedPosters.some((poster) => { //If it find a match/evaluates to TRUE, the duplicate poster is not saved. return poster.imageURL === currentPoster.imageURL && poster.title === currentPoster.title && poster.quote === currentPoster.quote @@ -375,7 +378,7 @@ function cleanData(posters) { function displayCleanedPosters(posters) { console.log("Rendering the following posters:", posters) - unmotivationalGrid.innerHTML = posters.map((poster, index) => { //added the index here + unmotivationalGrid.innerHTML = posters.map((poster, index) => { //added the index here. the id is added so that posters can also be identified and deleted. return `
From 88c772329819dca193a0b8abd4ef0c9952b00dea Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Sat, 12 Oct 2024 14:09:26 -0600 Subject: [PATCH 38/40] feat: make user duplicate cannot save message disappear after a new poster is generated --- src/main.js | 9 +++++++++ styles.css | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/src/main.js b/src/main.js index 1b13f3340..458545b43 100644 --- a/src/main.js +++ b/src/main.js @@ -245,6 +245,7 @@ var showUserPosterButton = document.querySelector(".make-poster") var showUnmotivationalPostersButton = document.querySelector(".show-unmotivational") var unmotivationalPostersSection = document.querySelector(".unmotivational-section") var unmotivationalGrid = document.querySelector("#unmotivational-grid") +var saveMessage = document.querySelector("#save-message") // var deleteAPoster = document.querySelector(".mini-poster") // event listeners go here πŸ‘‡ @@ -314,6 +315,9 @@ function showPoster(imageURL, title, quote) { } function showRandomHomepagePoster() { + + saveMessage.classList.add("hidden") + let randomImage = images[getRandomIndex(images)]; let randomTitle = titles[getRandomIndex(titles)]; let randomQuote = quotes[getRandomIndex(quotes)]; @@ -324,6 +328,8 @@ function showRandomHomepagePoster() { function showUserCreatedPoster(event) { event.preventDefault(); + saveMessage.classList.add("hidden") + let userImage = userPosterImage.value let userTitle = userPosterTitle.value let userQuote = userPosterQuote.value @@ -345,9 +351,12 @@ if (!savedPosters.some((poster) => { //If it find a match/evaluates to TRUE poster.quote === currentPoster.quote })) { savedPosters.push(currentPoster) + saveMessage.classList.add("hidden") // console.log("Poster saved:", currentPoster); // console.log("Saved Posters Array:", savedPosters); } else { + saveMessage.innerText = "Duplicate poster! This poster cannot be saved." + saveMessage.classList.remove("hidden") // console.log("Poster is already saved"); } } diff --git a/styles.css b/styles.css index 0d772df06..03ebd0358 100644 --- a/styles.css +++ b/styles.css @@ -156,6 +156,12 @@ h2 { text-transform: uppercase; } +#save-message { + color: red; + font-size: 25px; + font-weight: bold; + padding: 10px; +} /* ~~~~~ UNMOTIVATIONAL POSTER SECTION ~~~~~ */ .unmotivational-section .poster-title-unmotivational { color: black; From b7e541e2caeb3cc190317bc8aaef8431f30bd349 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Sat, 12 Oct 2024 14:19:58 -0600 Subject: [PATCH 39/40] feat: ensure that all changes for show user the duplicate message are in this pull request --- styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 03ebd0358..0e104064f 100644 --- a/styles.css +++ b/styles.css @@ -157,11 +157,12 @@ h2 { } #save-message { - color: red; + color: rgb(189, 48, 48); font-size: 25px; font-weight: bold; padding: 10px; } + /* ~~~~~ UNMOTIVATIONAL POSTER SECTION ~~~~~ */ .unmotivational-section .poster-title-unmotivational { color: black; From b229013b1d4994221040c6359d12b440d6912b43 Mon Sep 17 00:00:00 2001 From: Terra Manning Date: Mon, 14 Oct 2024 13:14:16 -0600 Subject: [PATCH 40/40] readme: add readme content --- README.md | 53 ++++++++++++++++++++++++++++------------------------- src/main.js | 5 ++--- 2 files changed, 30 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 6cd25184c..6656d2592 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ -# Hang In There - -A boilerplate repo. +# Hang in There -## Set Up +### 🎨 Abstract: +[//]: <> +This "Motivational Posters" project generates a random motivational poster to inspire the user. Other functionality includes creating a unique poster with user input for a title, quote and photo. All of these posters can be saved and viewed in a group. For an added bonus, viewers can go to an "unmotivational poster" page for some dark humor. What better way to motivate people than through comedy! If these unmotivational posters are not to the users taste, they can double-click them to make them disappear from the page. +### πŸ–₯️ Installation Instructions: +[//]: <> 1. Fork this repository 2. Clone down your new, forked repo 3. `cd` into the repository @@ -16,27 +18,28 @@ To view your project: 1. In your terminal, navigate to your project repo 2. Run the command `open index.html` -______________________________________________________ - -# Hang in There - -### Abstract: -[//]: <> (Briefly describe what you built and its features. What problem is the app solving? How does this application solve that problem?) -### Installation Instructions: -[//]: <> (What steps does a person have to take to get your app cloned down and running?) - -### Preview of App: +### πŸ”Ž Preview of App: [//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off. gifs preferred!) -### Context: -[//]: <> (Give some context for the project here. How long did you have to work on it? How far into the Turing program are you?) - -### Contributors: -[//]: <> (Who worked on this application? Link to your GitHub. Consider also providing LinkedIn link) - -### Learning Goals: -[//]: <> (What were the learning goals of this project? What tech did you work with?) - -### Wins + Challenges: -[//]: <> (What are 2-3 wins you have from this project? What were some challenges you faced - and how did you get over them?) +### πŸ—’οΈ Context: +[//]: <> +This solo GitHub project is from Turing School of Software and Design's start of Mod 2, which is the seventh week of the program. Within an eight day deadline, this assignment challenged us to integrate our skills learned thus far to design, develop and deploy a fully functional GitHub project. + +### πŸ‘πŸ½ Credits: +[//]: <> +Terra D. Manning
+https://www.linkedin.com/in/terra-manning/
+https://github.com/TDManning
+ +### 🌱 Learning Goals: +[//]: <> +1. Practice reading, understanding, and using existing code +2. Write clean, DRY JavaScript + * Build out funcitonality using functions that6 show trends toward SRP + * Manipulate the page after it has loaded by adding, removing, and updating elements on the DOM +3. Use CSS and HTML to match styling and layout of provided comps + +### πŸ† Wins + Challenges: +[//]: <> +Overall, this project was a lot of fun and each creating the javascript code in each iteration was rewarding because of its immediate functionality on the DOM. It was challenging to get the CSS alignment correct using flexbox and javascript, however the use of the Dev Console Tools make the trial and error process much more manageable. diff --git a/src/main.js b/src/main.js index 458545b43..8552d96f6 100644 --- a/src/main.js +++ b/src/main.js @@ -246,7 +246,6 @@ var showUnmotivationalPostersButton = document.querySelector(".show-unmotivation var unmotivationalPostersSection = document.querySelector(".unmotivational-section") var unmotivationalGrid = document.querySelector("#unmotivational-grid") var saveMessage = document.querySelector("#save-message") -// var deleteAPoster = document.querySelector(".mini-poster") // event listeners go here πŸ‘‡ window.addEventListener("load", showRandomHomepagePoster) @@ -329,7 +328,7 @@ function showUserCreatedPoster(event) { event.preventDefault(); saveMessage.classList.add("hidden") - + let userImage = userPosterImage.value let userTitle = userPosterTitle.value let userQuote = userPosterQuote.value @@ -421,4 +420,4 @@ function deleteUnmotivationalPoster(event) { //when a .mini-poster is double clicked the event handler checks if the target is inside a .mini-poster div //event.target.closest is a method used to find the nearest parent .mini-poster of the clicked area //when clicked the poster is removed from the array (unmotivational posters) using splice -//call the displayCleanedPosters function again to refresh the display and auto-update \ No newline at end of file +//call the displayCleanedPosters function again to refresh the display and auto-update