From e9c4d5aaf4a46cca3a7cf51b6634b9ae7b3057df Mon Sep 17 00:00:00 2001
From: Lito Croy <146680987+litobot@users.noreply.github.com>
Date: Fri, 23 Aug 2024 06:07:47 -0600
Subject: [PATCH 1/9] Show It.0-2 complete - will refactor
---
src/main.js | 111 ++++++++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 107 insertions(+), 4 deletions(-)
diff --git a/src/main.js b/src/main.js
index d818a0ab6..a06d9eba8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,73 @@
-// query selector variables go here ๐
+var image = document.querySelector('.poster-img');
+var title = document.querySelector('.poster-title');
+var quote = document.querySelector('.poster-quote');
+var mainPoster = document.querySelector('.main-poster');
+var showForm = document.querySelector('.poster-form');
+var savedPostersSection = document.querySelector('.saved-posters');
+
+// Buttons
+var makeNewPosterButton = document.querySelector('.show-form');
+var showSavedPosterButton = document.querySelector('.show-saved');
+var nevermindButton = document.querySelector('.show-main');
+var backToMainButtom = document.querySelector('.back-to-main');
+var showMyPosterButton = document.querySelector('.make-poster');
+
+// Input Fields
+var userImageUrlInput = document.querySelector('#poster-image-url');
+var userTitleInput = document.querySelector('#poster-title');
+var userQuoteInput = document.querySelector('#poster-quote');
+
+
+// First, use the values from the inputs to create a new, unique poster object and save it as the value of the currentPoster global variable (part of your data model)
+
+showMyPosterButton.addEventListener('click', function(event) {
+ event.preventDefault();
+ currentPoster = createPoster(userImageUrlInput.value, userTitleInput.value, userQuoteInput.value);
+ images.push(currentPoster.imageURL);
+ titles.push(currentPoster.title);
+ quotes.push(currentPoster.quote);
+ image.src = currentPoster.imageURL;
+ title.innerText = currentPoster.title;
+ quote.innerText = currentPoster.quote;
+ mainPoster.classList.toggle('hidden');
+ showForm.classList.toggle('hidden');
+});
+
+
+// Save the submitted data into the respective arrays (image URL into the images array, etc - all part of your data model) so that future random posters can use the user-created data
+
+// Change back to the main poster view (hiding the form view again)
+
+// Use the new, unique poster object (which should be saved in the currentPoster variable - part of your data model) to display the newly created poster image, title, and quote in the main view on the DOM
+
+// Will use createPoster Fx to take user inputs and generate new poster
+// Store user input variables in `currentPoster` variable
+
+window.addEventListener("load", collectPosterParts);
+
+makeNewPosterButton.addEventListener("click", function() {
+ mainPoster.classList.toggle('hidden')
+ showForm.classList.toggle('hidden')
+});
+
+showSavedPosterButton.addEventListener('click', function() {
+ mainPoster.classList.toggle('hidden')
+ savedPostersSection.classList.toggle('hidden')
+});
+
+nevermindButton.addEventListener('click', function() {
+ mainPoster.classList.remove('hidden')
+ showForm.classList.toggle('hidden')
+})
+
+backToMainButtom.addEventListener('click', function() {
+ mainPoster.classList.toggle('hidden')
+ savedPostersSection.classList.toggle('hidden')
+})
+
+//Consider how you might use arguments/parameters to make dynamic reusable functions to control what is shown/hidden.
+
-// 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 = [
"./assets/bees.jpg",
"./assets/bridge.jpg",
@@ -104,8 +170,24 @@ var currentPoster;
// event listeners go here ๐
+const randomPosterButton = document.querySelector('.show-random');
+randomPosterButton.addEventListener("click", collectPosterParts);
+
// functions and event handlers go here ๐
// (we've provided two to get you started)!
+
+// If the function requires the use of "AND" to describe it => SRP that shit
+function collectPosterParts() {
+ var randomImage = images[getRandomIndex(images)];
+ var randomTitle = titles[getRandomIndex(titles)];
+ var randomQuote = quotes[getRandomIndex(quotes)];
+ currentPoster = createPoster(randomImage, randomTitle, randomQuote);
+ image.src = randomImage;
+ title.innerText = randomTitle;
+ quote.innerText = randomQuote;
+ console.log(currentPoster)
+}
+
function getRandomIndex(array) {
return Math.floor(Math.random() * array.length);
}
@@ -116,4 +198,25 @@ function createPoster(imageURL, title, quote) {
imageURL: imageURL,
title: title,
quote: quote}
-}
\ No newline at end of file
+}
+
+
+
+
+
+// Switching views
+
+// Click "Show Saved Posters" button
+ // Reveal saved posters area
+
+// Click "Nevermind, take me back" OR "Back to Main buttons"
+ // Show only main poster section
+
+
+// Will use classList to add/remove class of `hidden` to reveal create poster form
+ // Event listener to alternate what is hidden and what is not upon clicking "Make Your Own Poster" button
+// Will save newly created poster in arrays for future recycling with `Random Poster` Button
+
+// Clicking "Nevermind, Take me back" button return to original view of main poster section
+
+
From af913f33a07aaea8b932b0d52a49d6fbb04183fc Mon Sep 17 00:00:00 2001
From: Lito Croy <146680987+litobot@users.noreply.github.com>
Date: Fri, 23 Aug 2024 07:22:53 -0600
Subject: [PATCH 2/9] EL & Fx refactor complete - all previous functionality
still works
---
src/main.js | 219 +++++++++++++++++++++++++++++-----------------------
1 file changed, 121 insertions(+), 98 deletions(-)
diff --git a/src/main.js b/src/main.js
index a06d9eba8..934e72d01 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,73 +1,3 @@
-var image = document.querySelector('.poster-img');
-var title = document.querySelector('.poster-title');
-var quote = document.querySelector('.poster-quote');
-var mainPoster = document.querySelector('.main-poster');
-var showForm = document.querySelector('.poster-form');
-var savedPostersSection = document.querySelector('.saved-posters');
-
-// Buttons
-var makeNewPosterButton = document.querySelector('.show-form');
-var showSavedPosterButton = document.querySelector('.show-saved');
-var nevermindButton = document.querySelector('.show-main');
-var backToMainButtom = document.querySelector('.back-to-main');
-var showMyPosterButton = document.querySelector('.make-poster');
-
-// Input Fields
-var userImageUrlInput = document.querySelector('#poster-image-url');
-var userTitleInput = document.querySelector('#poster-title');
-var userQuoteInput = document.querySelector('#poster-quote');
-
-
-// First, use the values from the inputs to create a new, unique poster object and save it as the value of the currentPoster global variable (part of your data model)
-
-showMyPosterButton.addEventListener('click', function(event) {
- event.preventDefault();
- currentPoster = createPoster(userImageUrlInput.value, userTitleInput.value, userQuoteInput.value);
- images.push(currentPoster.imageURL);
- titles.push(currentPoster.title);
- quotes.push(currentPoster.quote);
- image.src = currentPoster.imageURL;
- title.innerText = currentPoster.title;
- quote.innerText = currentPoster.quote;
- mainPoster.classList.toggle('hidden');
- showForm.classList.toggle('hidden');
-});
-
-
-// Save the submitted data into the respective arrays (image URL into the images array, etc - all part of your data model) so that future random posters can use the user-created data
-
-// Change back to the main poster view (hiding the form view again)
-
-// Use the new, unique poster object (which should be saved in the currentPoster variable - part of your data model) to display the newly created poster image, title, and quote in the main view on the DOM
-
-// Will use createPoster Fx to take user inputs and generate new poster
-// Store user input variables in `currentPoster` variable
-
-window.addEventListener("load", collectPosterParts);
-
-makeNewPosterButton.addEventListener("click", function() {
- mainPoster.classList.toggle('hidden')
- showForm.classList.toggle('hidden')
-});
-
-showSavedPosterButton.addEventListener('click', function() {
- mainPoster.classList.toggle('hidden')
- savedPostersSection.classList.toggle('hidden')
-});
-
-nevermindButton.addEventListener('click', function() {
- mainPoster.classList.remove('hidden')
- showForm.classList.toggle('hidden')
-})
-
-backToMainButtom.addEventListener('click', function() {
- mainPoster.classList.toggle('hidden')
- savedPostersSection.classList.toggle('hidden')
-})
-
-//Consider how you might use arguments/parameters to make dynamic reusable functions to control what is shown/hidden.
-
-
var images = [
"./assets/bees.jpg",
"./assets/bridge.jpg",
@@ -165,19 +95,133 @@ 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."
];
-var savedPosters = [];
+
var currentPoster;
+var savedPosters = [];
+
+var image = document.querySelector('.poster-img');
+var title = document.querySelector('.poster-title');
+var quote = document.querySelector('.poster-quote');
+var showForm = document.querySelector('.poster-form');
+var mainPoster = document.querySelector('.main-poster');
+var randomPosterButton = document.querySelector('.show-random');
+var savedPostersSection = document.querySelector('.saved-posters');
+
+// Buttons
+var nevermindButton = document.querySelector('.show-main');
+var makeNewPosterButton = document.querySelector('.show-form');
+var backToMainButtom = document.querySelector('.back-to-main');
+var showMyPosterButton = document.querySelector('.make-poster');
+var showSavedPosterButton = document.querySelector('.show-saved');
+
+// User Input Fields
+var userImageUrlInput = document.querySelector('#poster-image-url');
+var userTitleInput = document.querySelector('#poster-title');
+var userQuoteInput = document.querySelector('#poster-quote');
+
+// Consider how you might use arguments/parameters to make dynamic reusable functions to control what is shown/hidden.
+// I think this is what Chat helped me do with refactoring
+ // Adding `event`, `element`, and `poster` as arguments
+
+
+// Event Listeners
+
+// Before refactoring Event Listeners - (Save for now)
+
+// makeNewPosterButton.addEventListener("click", function() {
+ // mainPoster.classList.toggle('hidden')
+ // showForm.classList.toggle('hidden')
+ // });
+
+// showSavedPosterButton.addEventListener('click', function() {
+// mainPoster.classList.toggle('hidden')
+// savedPostersSection.classList.toggle('hidden')
+// });
+
+// nevermindButton.addEventListener('click', function() {
+// mainPoster.classList.remove('hidden')
+// showForm.classList.toggle('hidden')
+// })
+
+// backToMainButtom.addEventListener('click', function() {
+// mainPoster.classList.toggle('hidden')
+// savedPostersSection.classList.toggle('hidden')
+// })
+
+// showMyPosterButton.addEventListener('click', function(event) {
+// event.preventDefault();
+// currentPoster = createPoster(userImageUrlInput.value, userTitleInput.value, userQuoteInput.value);
+// images.push(currentPoster.imageURL);
+// titles.push(currentPoster.title);
+// quotes.push(currentPoster.quote);
+// image.src = currentPoster.imageURL;
+// title.innerText = currentPoster.title;
+// quote.innerText = currentPoster.quote;
+// mainPoster.classList.toggle('hidden');
+// showForm.classList.toggle('hidden');
+// });
+
+window.addEventListener('load', generateRandomPoster);
+randomPosterButton.addEventListener('click', generateRandomPoster);
+showMyPosterButton.addEventListener('click', handleNewPosterCreation);
+
+makeNewPosterButton.addEventListener('click', function() {
+ toggleVisibility(mainPoster);
+ toggleVisibility(showForm);
+});
+
+showSavedPosterButton.addEventListener('click', function() {
+ toggleVisibility(mainPoster);
+ toggleVisibility(savedPostersSection);
+});
+
+nevermindButton.addEventListener('click', function() {
+ showElement(mainPoster);
+ hideElement(showForm);
+});
+
+backToMainButtom.addEventListener('click', function() {
+ toggleVisibility(mainPoster);
+ toggleVisibility(savedPostersSection);
+});
-// event listeners go here ๐
+function toggleVisibility(element) {
+ element.classList.toggle('hidden');
+}
+
+function showElement(element) {
+ element.classList.remove('hidden');
+}
-const randomPosterButton = document.querySelector('.show-random');
-randomPosterButton.addEventListener("click", collectPosterParts);
+function hideElement(element) {
+ element.classList.add('hidden');
+}
-// functions and event handlers go here ๐
-// (we've provided two to get you started)!
+// Updates HTML elements with poster parts
+function updatePosterDisplay(poster) {
+ image.src = poster.imageURL;
+ title.innerText = poster.title;
+ quote.innerText = poster.quote;
+}
+
+function handleNewPosterCreation(event) {
+ event.preventDefault(); // Form submission default is to refresh page (not desired here)
+ currentPoster = createPoster(userImageUrlInput.value, userTitleInput.value, userQuoteInput.value);
+ saveUserPosterData(currentPoster);
+ updatePosterDisplay(currentPoster);
+ toggleVisibility(mainPoster);
+ toggleVisibility(showForm);
+}
+
+// Saves poster parts in respective arrays for future random poster generation
+function saveUserPosterData(poster) {
+ images.push(currentPoster.imageURL);
+ titles.push(currentPoster.title);
+ quotes.push(currentPoster.quote);
+}
// If the function requires the use of "AND" to describe it => SRP that shit
-function collectPosterParts() {
+function generateRandomPoster() {
var randomImage = images[getRandomIndex(images)];
var randomTitle = titles[getRandomIndex(titles)];
var randomQuote = quotes[getRandomIndex(quotes)];
@@ -199,24 +243,3 @@ function createPoster(imageURL, title, quote) {
title: title,
quote: quote}
}
-
-
-
-
-
-// Switching views
-
-// Click "Show Saved Posters" button
- // Reveal saved posters area
-
-// Click "Nevermind, take me back" OR "Back to Main buttons"
- // Show only main poster section
-
-
-// Will use classList to add/remove class of `hidden` to reveal create poster form
- // Event listener to alternate what is hidden and what is not upon clicking "Make Your Own Poster" button
-// Will save newly created poster in arrays for future recycling with `Random Poster` Button
-
-// Clicking "Nevermind, Take me back" button return to original view of main poster section
-
-
From be26dc1a5423d23ff3950cb4a361ba65806a05b1 Mon Sep 17 00:00:00 2001
From: Lito Croy <146680987+litobot@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:12:01 -0600
Subject: [PATCH 3/9] Nearly complete It.3 - styling fix required
---
src/main.js | 40 +++++++++++++++++++++++++++++++++++-----
1 file changed, 35 insertions(+), 5 deletions(-)
diff --git a/src/main.js b/src/main.js
index 934e72d01..f9de1e25e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -104,7 +104,6 @@ var title = document.querySelector('.poster-title');
var quote = document.querySelector('.poster-quote');
var showForm = document.querySelector('.poster-form');
var mainPoster = document.querySelector('.main-poster');
-var randomPosterButton = document.querySelector('.show-random');
var savedPostersSection = document.querySelector('.saved-posters');
// Buttons
@@ -112,7 +111,9 @@ var nevermindButton = document.querySelector('.show-main');
var makeNewPosterButton = document.querySelector('.show-form');
var backToMainButtom = document.querySelector('.back-to-main');
var showMyPosterButton = document.querySelector('.make-poster');
+var randomPosterButton = document.querySelector('.show-random');
var showSavedPosterButton = document.querySelector('.show-saved');
+var saveCurrentPosterButton = document.querySelector('.save-poster');
// User Input Fields
var userImageUrlInput = document.querySelector('#poster-image-url');
@@ -165,15 +166,15 @@ window.addEventListener('load', generateRandomPoster);
randomPosterButton.addEventListener('click', generateRandomPoster);
showMyPosterButton.addEventListener('click', handleNewPosterCreation);
+// Should this EL both save the current poster to the array & nest the pageview changes?
+saveCurrentPosterButton.addEventListener('click', savePosterHandler);
+
makeNewPosterButton.addEventListener('click', function() {
toggleVisibility(mainPoster);
toggleVisibility(showForm);
});
-showSavedPosterButton.addEventListener('click', function() {
- toggleVisibility(mainPoster);
- toggleVisibility(savedPostersSection);
-});
+showSavedPosterButton.addEventListener('click', showSavedPostersHandler);
nevermindButton.addEventListener('click', function() {
showElement(mainPoster);
@@ -185,6 +186,8 @@ backToMainButtom.addEventListener('click', function() {
toggleVisibility(savedPostersSection);
});
+
+// Functions
function toggleVisibility(element) {
element.classList.toggle('hidden');
}
@@ -232,6 +235,33 @@ function generateRandomPoster() {
console.log(currentPoster)
}
+// We want saved posters to display
+
+
+function saveCurrentPoster() {
+ if (savedPosters.includes(currentPoster)) {
+ return;
+ }
+ savedPosters.push(currentPoster);
+ var posterGrid = document.querySelector('.saved-posters-grid');
+ posterGrid.insertAdjacentHTML('afterbegin', `
+
+
${currentPoster.title}
+
${currentPoster.quote}
+ `)
+}
+
+function savePosterHandler() {
+ saveCurrentPoster();
+ // Add elements to
+ showSavedPostersHandler();
+}
+
+function showSavedPostersHandler() {
+ toggleVisibility(mainPoster);
+ toggleVisibility(savedPostersSection);
+}
+
function getRandomIndex(array) {
return Math.floor(Math.random() * array.length);
}
From 3dce46f0f1679002b5ce126f34e189caa1bee5e7 Mon Sep 17 00:00:00 2001
From: Lito Croy <146680987+litobot@users.noreply.github.com>
Date: Sun, 25 Aug 2024 14:42:55 -0600
Subject: [PATCH 4/9] It.3 complete/functional
---
src/main.js | 21 +++++++++++++++------
1 file changed, 15 insertions(+), 6 deletions(-)
diff --git a/src/main.js b/src/main.js
index f9de1e25e..26ca099f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -162,7 +162,7 @@ var userQuoteInput = document.querySelector('#poster-quote');
// showForm.classList.toggle('hidden');
// });
-window.addEventListener('load', generateRandomPoster);
+
randomPosterButton.addEventListener('click', generateRandomPoster);
showMyPosterButton.addEventListener('click', handleNewPosterCreation);
@@ -217,6 +217,7 @@ function handleNewPosterCreation(event) {
}
// Saves poster parts in respective arrays for future random poster generation
+// For form
function saveUserPosterData(poster) {
images.push(currentPoster.imageURL);
titles.push(currentPoster.title);
@@ -236,7 +237,7 @@ function generateRandomPoster() {
}
// We want saved posters to display
-
+var posterGrid = document.querySelector('.saved-posters-grid');
function saveCurrentPoster() {
if (savedPosters.includes(currentPoster)) {
@@ -244,12 +245,18 @@ function saveCurrentPoster() {
}
savedPosters.push(currentPoster);
var posterGrid = document.querySelector('.saved-posters-grid');
- posterGrid.insertAdjacentHTML('afterbegin', `
-
-