Switching views

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,17 +115,52 @@ 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)!
 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])
 }