From c412b4ee7ddde4c334881e8f4d567045961769a0 Mon Sep 17 00:00:00 2001 From: Joel Davalos Date: Wed, 9 Oct 2024 21:38:58 -0600 Subject: [PATCH 1/6] Inital commit --- src/main.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/main.js b/src/main.js index d818a0ab6..b63a3b468 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,9 @@ // query selector variables go here 👇 +var posterImage = document.querySelector('.poster-img') +var posterTitle = document.querySelector('.poster-title') +var posterQuote = document.querySelector('.poster-quote') +var showRandomBtn = document.querySelector('.show-random') // 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 = [ From 2bd140651f9ff5235649aadc14dbc4b186e798d4 Mon Sep 17 00:00:00 2001 From: Joel Davalos Date: Wed, 9 Oct 2024 21:41:03 -0600 Subject: [PATCH 2/6] Added event listener for show random btn and window --- src/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index b63a3b468..db31724cb 100644 --- a/src/main.js +++ b/src/main.js @@ -107,7 +107,8 @@ var savedPosters = []; var currentPoster; // event listeners go here 👇 - +window.addEventListener('load', displayRandomPoster) +showRandomBtn.addEventListener('click', displayRandomPoster) // functions and event handlers go here 👇 // (we've provided two to get you started)! function getRandomIndex(array) { From a264037d084f1bf25d4e066145664ed3943af72d Mon Sep 17 00:00:00 2001 From: Joel Davalos Date: Wed, 9 Oct 2024 21:54:54 -0600 Subject: [PATCH 3/6] Built display random poster function --- src/main.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/main.js b/src/main.js index db31724cb..3545c9818 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,7 @@ var posterTitle = document.querySelector('.poster-title') var posterQuote = document.querySelector('.poster-quote') var showRandomBtn = document.querySelector('.show-random') + // 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 = [ @@ -109,12 +110,23 @@ var currentPoster; // event listeners go here 👇 window.addEventListener('load', displayRandomPoster) showRandomBtn.addEventListener('click', displayRandomPoster) + + // functions and event handlers go here 👇 // (we've provided two to get you started)! function getRandomIndex(array) { return Math.floor(Math.random() * array.length); } +function displayRandomPoster() { + var randomImage = images[getRandomIndex(images)] + var randomTitle = titles[getRandomIndex(titles)] + var randomQuote = quotes[getRandomIndex(quotes)] + + posterImage.src = randomImage + posterTitle.innerText = randomTitle + posterQuote.innerText = randomQuote +} function createPoster(imageURL, title, quote) { return { id: Date.now(), From d144fb92e778cc3cb25ac3584666bf0927bb4ba4 Mon Sep 17 00:00:00 2001 From: Joel Davalos Date: Wed, 9 Oct 2024 22:22:01 -0600 Subject: [PATCH 4/6] added querySelectors --- src/main.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/main.js b/src/main.js index 3545c9818..2237e30bd 100644 --- a/src/main.js +++ b/src/main.js @@ -2,8 +2,15 @@ var posterImage = document.querySelector('.poster-img') var posterTitle = document.querySelector('.poster-title') var posterQuote = document.querySelector('.poster-quote') +var mainPosterSection = document.querySelector('.main-poster') +var formSection = document.querySelector('.poster-form') +var savedPostersSection = document.querySelector('.saved-posters') var showRandomBtn = document.querySelector('.show-random') +var makePosterBtn = document.querySelector('.show-form') +var showSavedBtn = document.querySelector('.show-saved') +var nevermindBtn = document.querySelector('.show-main') +var backToMainBtn = document.querySelector('.back-to-main') // 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 From 4b5ad7d9bb813f366a0f8de4039a857e2d3bb4ae Mon Sep 17 00:00:00 2001 From: Joel Davalos Date: Wed, 9 Oct 2024 22:35:06 -0600 Subject: [PATCH 5/6] Added eventListner --- src/main.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 2237e30bd..b9af538d6 100644 --- a/src/main.js +++ b/src/main.js @@ -117,7 +117,10 @@ var currentPoster; // event listeners go here 👇 window.addEventListener('load', displayRandomPoster) showRandomBtn.addEventListener('click', displayRandomPoster) - +makePosterBtn.addEventListener('click', showForm) +showSavedBtn.addEventListener('click', showSavedPosters) +backToMainBtn.addEventListener('click', showMainPoster) +nevermindBtn.addEventListener('click', showMainPoster) // functions and event handlers go here 👇 // (we've provided two to get you started)! @@ -134,6 +137,8 @@ function displayRandomPoster() { posterTitle.innerText = randomTitle posterQuote.innerText = randomQuote } + + function createPoster(imageURL, title, quote) { return { id: Date.now(), From 18c1ff8cdf3fe080d6e982aa54b3196474318a90 Mon Sep 17 00:00:00 2001 From: Joel Davalos Date: Mon, 14 Oct 2024 21:39:55 -0600 Subject: [PATCH 6/6] Each button can switch to the correctscreen --- src/main.js | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/main.js b/src/main.js index b9af538d6..49efac7ce 100644 --- a/src/main.js +++ b/src/main.js @@ -117,10 +117,10 @@ var currentPoster; // event listeners go here 👇 window.addEventListener('load', displayRandomPoster) showRandomBtn.addEventListener('click', displayRandomPoster) -makePosterBtn.addEventListener('click', showForm) -showSavedBtn.addEventListener('click', showSavedPosters) -backToMainBtn.addEventListener('click', showMainPoster) -nevermindBtn.addEventListener('click', showMainPoster) +makePosterBtn.addEventListener('click', showFormSection) +showSavedBtn.addEventListener('click', showSavedSection) +backToMainBtn.addEventListener('click', showMainSection) +nevermindBtn.addEventListener('click', showMainSection) // functions and event handlers go here 👇 // (we've provided two to get you started)! @@ -138,11 +138,29 @@ function displayRandomPoster() { posterQuote.innerText = randomQuote } - function createPoster(imageURL, title, quote) { return { id: Date.now(), imageURL: imageURL, title: title, quote: quote} +} + +function switchView(showSection, hideSections) { + showSection.classList.remove('hidden') + hideSections.forEach(section => section.classList.add('hidden')) +} + +function showFormSection() { + switchView(formSection, [mainPosterSection, savedPostersSection]) + +} + + +function showSavedSection() { + switchView(savedPostersSection, [mainPosterSection, formSection]) +} + +function showMainSection() { + switchView(mainPosterSection, [formSection, savedPostersSection]) } \ No newline at end of file