diff --git a/src/main.js b/src/main.js index d818a0ab6..49efac7ce 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,16 @@ // query selector variables go here 👇 +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 @@ -103,6 +115,12 @@ var savedPosters = []; var currentPoster; // event listeners go here 👇 +window.addEventListener('load', displayRandomPoster) +showRandomBtn.addEventListener('click', displayRandomPoster) +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)! @@ -110,10 +128,39 @@ 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(), 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