Jeremiah Ross Hang In There Submission

README.md

@@ -1,46 +1,39 @@
-# Hang In There
-
-A boilerplate repo. 
-
-## Set Up
-
-1. Fork this repository
-2. Clone down your new, forked repo
-3. `cd` into the repository
-4. Open it in your text editor
-5. Add the instructors as collaborators on the repository
-
-Project spec & rubric can be found [here](https://curriculum.turing.edu/module2/projects/hang-in-there/index)
-
-To view your project:
-
-1. In your terminal, navigate to your project repo
-2. Run the command `open index.html`
-
-______________________________________________________  
-# README Template  
-Before turning this project in, erase this line and everything above it and fill in the info below.  
-______________________________________________________  
-
 # Hang in There  
 
 ### Abstract:
 [//]: <> (Briefly describe what you built and its features. What problem is the app solving? How does this application solve that problem?)
+This is a Motivational/Un-motivational poster website. You can create random motivational posters and custom posters and save them to be perused at a later time. Also has an optional Un-motivational section that you can peruse.
 
 ### Installation Instructions:
 [//]: <> (What steps does a person have to take to get your app cloned down and running?)
-
+Pull  the GitHub repo and run `open index.html` from the directory you have the repo pulled to.
 ### Preview of App:
 [//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off. gifs preferred!)
-
+![how to gif](./readme-imgs/tutorial.gif)
 ### 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?)
-
+The project was introduced as the first project for Mod 2 with a focus on front-end develpoment. We were given a week to build the website and functions per the evaluation rubric. 
 ### Contributors:
 [//]: <> (Who worked on this application? Link to your GitHub. Consider also providing LinkedIn link)
+Jeremiah Ross is the sole contributor to the project at this time.
 
+[GitHub](https://github.com/Crosswolfv1)
+
+[linkedIn](https://www.linkedin.com/in/jeremiahross/)
 ### Learning Goals:
 [//]: <> (What were the learning goals of this project? What tech did you work with?)
-
+- Practice reading, understanding, and using existing code
+- Write clean, DRY JavaScript
+  - Build out functionality using functions that show trends toward SRP
+  - Manipulate the page after it has loaded by adding, removing, and updating elements on the DOM
+  - Use array prototype iterator methods to reformat data and display it on the DOM
+- Use CSS and HTML to match styling and layout of provided comps
+
+Primarily used VScode and a few of their plugins for ease of viewing the HTML and modifying it. MDN docs were heavily used to find preexisting functions I could manipulate to accomplish mmy desisred tasks.
 ### 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
+ - Discovered use of the `.closest()` function when using events to find the closest element with a specific class
+ - Able to find a way to set eventlisteners in functions (though was adviced not to do this for the project)
+ Updating the DOM vs updating the arrays, had several issues where I could update one but not the other. Research into the doms to find how to toggle specific classes.
+

index.html

@@ -18,6 +18,7 @@ <h3 class="poster-quote">Quote</h3>
     <button class="show-saved">Show Saved Posters</button>
     <button class="show-random">Show Another Random Poster</button>
     <button class="show-form">Make Your Own Poster</button>
+    <button class="show-unmotivational">Unmotivational Posters</button>
   </section>
   <section class="poster-form hidden">
     <form>
@@ -38,6 +39,11 @@ <h2>Saved Posters</h2>
     <div class="saved-posters-grid"></div>
     <button class="back-to-main">Back to Main</button>
   </section>
+  <section class="unmotivational-posters hidden">
+    <h2>Un-motivational Posters</h2>
+    <div class="unmotivational-posters-grid"></div>
+    <button class="become-motivated">Become Motivated</button>
+  </section>
   <script src="./src/main.js"></script>
 </body>
 </html>