iteration 1 tested and completed

README.md

@@ -1,43 +1,56 @@
-# RomCom
-
-A boilerplate repo. 
-
-## Set Up
-1. ONE teammate: fork this boilerplate repository 
-2. Clone down your new, forked repo
-3. cd into the repository
-4. Open it in your text editor
-5. View the project in the browser by running open index.html in your terminal
-6. Add all project partners and your assigned instructor as collaborators on the repository
-
-You will not need to worry about importing/exporting the arrays from the data.js file because they are linked via the script in the `index.html` file.  
-
-The project spec & rubric can be found [here](https://frontend.turing.io/projects/module-1/romcom-pair.html)
 
-______________________________________________________  
-# README Template  
-Before turning this project in, erase this line and everything above it and fill in the info below.  
 ______________________________________________________  
 
 # RomCom  
 
+
 ### Abstract:
 [//]: <> (Briefly describe what you built and its features. What problem is the app solving? How does this application solve that problem?)
 
+A romance novel cover generator generates unique, dynamic covers with user-chosen images, titles, and descriptiors. Users can save and delete covers, view them side-by-side, or delete them by double-clicking.
+
 ### Installation Instructions:
 [//]: <> (What steps does a person have to take to get your app cloned down and running?)
+1. Click the *fork* button located in the upper right corner of your screen.
+2. On your local machine, navigate to where you want to clone down the repo.
+3. Clone your copy of the repository to your local machine using the command *git clone* [insert SSH code here]
+4. Move into that new directory using *cd* *<directory name>* and open the project. 
+5. View the project in the browser by entering *open index.html* in the terminal within your romcom directory.
 
 ### Preview of App:
-[//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off.)
+[//]: <> ![alt text](<Screenshot 2024-05-19 at 7.40.49 PM.png>)
 
 ### 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?)
-
+Only two weeks into our coding program with Turing, we worked as a team for around 20 hours in order to create code that makes this page functional. 
 ### Contributors:
-[//]: <> (Who worked on this application? Link to their GitHubs.)
+[//]: <> Robert Phillips https://github.com/robert-phillips33 & Terra Manning https://github.com/TDManning
 
 ### Learning Goals:
 [//]: <> (What were the learning goals of this project? What tech did you work with?)
+1. Write clean, DRY JavaScript
+- Build out functionality using functions that show trends toward SRP
+- Manipulate the page after it has loaded adding, removing, and updating elements on the DOM
+2. Explore the connection between HTML, CSS, and JavaScript
+- Practice reading, understanding, and using provided code
+3. Write code collaboratively
+- Document changes with atomic commits & thorough code reviews
+- Communicate, troubleshoot, and plan effectively as a team
+- Ensure all team members are able to be heard and contribute throughout the project
+
 
 ### 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?)
+#### Wins  
+- Getting a good bit of experience coding javascript that actually creates a dynamic user experience by manipulating dom elements! It was definitely satisfying building our first web application.
+
+- Working together as a team and collaborating to come up with solutions. 
+
+#### Challenges 
+- We started this project without all of the tools to complete it. Through a tremendous amount of perseverance we worked through it to completion.
+
+- Throughout a lot of the project after the early iterations, we felt as though we knew what we wanted to do with the code to get the desired outcome, but not how to execute it. We definitely did learn a lot though, and will 100% be referencing our code from this project in order to help solve future problems. The biggest factor that enabled us to overcome this challenge was leaning into our cohort mates and asking tons of questions. While we did need a good bit of assistance to guide us in the right direction, I think we learned a lot and that is dope!!!
+
+
+
+

src/main.js

@@ -1,30 +1,156 @@
-// Create variables targetting the relevant DOM elements here 👇
 
+var coverImage = document.querySelector(".cover-image");
+var coverTitle = document.querySelector(".cover-title");
+var taglineMain = document.querySelector(".tagline");
+var tagline1 = document.querySelector(".tagline-1");
+var tagline2 = document.querySelector(".tagline-2");
+var homeButton = document.querySelector(".home-button");
+var randomCoverButton = document.querySelector(".random-cover-button");
+var saveCoverButton = document.querySelector(".save-cover-button");
+var makeYourOwnButton = document.querySelector(".make-new-button");
+var savedCoversSection = document.querySelector(".saved-covers-section");
+var descriptor1 = document.querySelector(".tagline-1");
+var descriptor2 = document.querySelector(".tagline-2");
+var makeMyBookButton = document.querySelector(".create-new-book-button");
+var formView = document.querySelector(".form-view");
+var priceTag = document.querySelector(".price-tag");
+var homeView = document.querySelector(".home-view");
+var viewSavedButton = document.querySelector(".view-saved-button");
+var savedView = document.querySelector(".saved-view");
 
-// We've provided a few variables below
-var savedCovers = [
-  createCover("http://3.bp.blogspot.com/-iE4p9grvfpQ/VSfZT0vH2UI/AAAAAAAANq8/wwQZssi-V5g/s1600/Do%2BNot%2BForsake%2BMe%2B-%2BImage.jpg", "Sunsets and Sorrows", "sunsets", "sorrows")
-];
+var savedCovers = [];
 var currentCover;
 
-// Add your event listeners here 👇
+addEventListener("load", showRandomCover);
+randomCoverButton.addEventListener("click", showRandomCover);
+makeYourOwnButton.addEventListener("click", showFormView);
+viewSavedButton.addEventListener("click", showSavedCoverView);
+homeButton.addEventListener("click", showHomePage);
+makeMyBookButton.addEventListener("click", createUserBook);
+saveCoverButton.addEventListener("click", saveGeneratedCover);
 
+function showRandomCover() {
+  coverImage.src = covers[getRandomIndex(covers)];
+  coverTitle.innerText = titles[getRandomIndex(titles)];
+  tagline1.innerText = descriptors[getRandomIndex(descriptors)];
+  tagline2.innerText = descriptors[getRandomIndex(descriptors)];
+  saveMainCoverToCurrentCover();
+};
 
-// Create your event handlers and other functions here 👇
-
-
-// We've provided two functions to get you started
 function getRandomIndex(array) {
   return Math.floor(Math.random() * array.length);
-}
+};
 
 function createCover(imgSrc, title, descriptor1, descriptor2) {
   var cover = {
     id: Date.now(),
     coverImg: imgSrc,
     title: title,
     tagline1: descriptor1,
-    tagline2: descriptor2
+    tagline2: descriptor2,
+  };
+  return cover;
+};
+
+function showFormView() {
+  homeView.classList.add("hidden");
+  homeButton.classList.remove("hidden");
+  formView.classList.remove("hidden");
+  savedView.classList.add("hidden");
+  randomCoverButton.classList.add("hidden");
+  saveCoverButton.classList.add("hidden");
+};
+
+function showSavedCoverView() {
+  homeView.classList.add("hidden");
+  saveCoverButton.classList.add("hidden");
+  randomCoverButton.classList.add("hidden");
+  savedCoversSection.classList.remove("hidden");
+  savedView.classList.remove("hidden");
+  homeButton.classList.remove("hidden");
+  showSavedCovers();
+};
+
+function showHomePage() {
+  savedView.classList.add("hidden");
+  homeView.classList.remove("hidden");
+  homeButton.classList.add("hidden");
+  formView.classList.add("hidden");
+  randomCoverButton.classList.remove("hidden");
+  saveMainCoverToCurrentCover()
+  saveCoverButton.classList.remove("hidden");
+};
+
+var userCover = document.querySelector('#cover');
+var userTitle = document.querySelector('#title');
+var userDescription1 = document.querySelector('#descriptor1');
+var userDescription2 = document.querySelector('#descriptor2');
+
+function createUserBook(event) {
+  event.preventDefault()
+
+  coverImage.src = userCover.value;
+  coverTitle.innerText = userTitle.value;
+  tagline1.innerText = userDescription1.value;
+  tagline2.innerText = userDescription2.value;
+  saveMainCoverToCurrentCover();
+  showHomePage();
+};
+
+function saveGeneratedCover() {
+  if (!savedCovers.includes(currentCover)) {
+    savedCovers.push(currentCover);
+  }
+};
+
+function showSavedCovers() {
+  savedCoversSection.innerHTML = '';
+  var newInnerHTML = '';
+  for (var i = 0; i < savedCovers.length; i++) {
+    newInnerHTML += makeHTMLFromCover(savedCovers[i]);
+  }
+  savedCoversSection.innerHTML = newInnerHTML;
+  var miniCoverElements = document.querySelectorAll(".mini-cover");
+  for (var i = 0; i < miniCoverElements.length; i++) {
+    miniCoverElements[i].addEventListener("dblclick", deleteSavedCover);
+  }
+};
+
+function deleteSavedCover(event) {
+  event.preventDefault()
+  var idToDelete = event.currentTarget.id;
+  for (var i = 0; i < savedCovers.length; i++) {
+    if (idToDelete === savedCovers[i].id.toString()) {
+      savedCovers.splice(i, 1);
+    }
   }
-  return cover
-}
+  showSavedCovers();
+};
+
+function makeHTMLFromCover(cover) {
+  var coverTagline1 = `<span class="tagline-1">${cover.tagline1}</span>`;
+  var coverTagline2 = `<span class="tagline-2">${cover.tagline2}</span>`;
+  var tagline = `<h3 class="tagline">A tale of ${coverTagline1} and ${coverTagline2}</h3>`;
+  var title = `<h2 class="cover-title">${cover.title}</h2>`;
+  var coverImage = `<img class="cover-image" src="${cover.coverImg}">`;
+  var overlay = `<img class="overlay" src="./assets/overlay.png">`;
+  var coverHTML = `<section class="mini-cover" id=${cover.id}>${coverImage}${title}${tagline}${overlay}</section>`;
+
+  return coverHTML;
+};
+
+function saveMainCoverToCurrentCover() {
+  var mainCover = createCover(coverImage.src, coverTitle.innerText, descriptor1.innerText, descriptor2.innerText);
+  currentCover = mainCover;
+};
+
+
+
+
+
+
+
+
+
+
+