Joe Chirchirillo

README.md

@@ -1,46 +1,43 @@
-# 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 your project manager as a collaborator 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?)
+Sometimes we all need a little inspiration. This webpage contains a small interactive platform where motivational posters (MPs) are randomly generated. Additionally, there is a page of Demotivational Posters (DPs) for contrast. The DP page has a built in feature to remove individual DPs if they harsh the vibe too much. Lastly, there is an option for the user to create their own MP with a default template.
 
 ### Installation Instructions:
-[//]: <> (What steps does a person have to take to get your app cloned down and running?)
+1. In your CLI navigate to an empty directory. 
+2. Fork [from this webpage](https://github.com/jchirch/hang-in-there) and clone into empty directory.
+3. Open new tab on web browser and enter `cmd + O`.
+4. Navigate to empty directory made in step 1.
+5. Open and begin exploring.
 
 ### Preview of App:
-[//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off. gifs preferred!)
 
+<img src="MP-screenshot.PNG">
+
+An example of a custom Motivational Poster that a user could make.
 ### 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?)
+This project was completed from a template in 9 days time. I've been enrolled in Turing for about 2 months and have been learning HTML, Javascript, and CSS for 10 days.
 
 ### Contributors:
-[//]: <> (Who worked on this application? Link to your GitHub. Consider also providing LinkedIn link)
+
+Joe Chirchirillo, [Github](https://github.com/jchirch) & [LinkedIn](https://www.linkedin.com/in/joechirchirillo/).
 
 ### Learning Goals:
-[//]: <> (What were the learning goals of this project? What tech did you work with?)
+The primary objective of this project was to have a lightspeed crash course on web development through trial and error. There were several sub- objectives for this project:
+
+- 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.
 
 ### 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?)
+There were as many challenges on this projects as there are stars in the sky.
+I had zero experiance with web development or Javascript, CSS, & HTML before beginning.
+Whenever I hit a wall that no ammount of googling or reading notes/MDN Docs could overcome, I reached out to the Turing community for a nudge.
+
+Some personal wins for this project include:
+- Reusing logic to efficiently overcome technical challenges.
+- Be able to parse a large data set, extract desired information, and generate new data structures with said desired info (a topic I struggled with in the past).
+- Having a full comprehension of all written code.

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-unmotivationals">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="unmotivationals hidden">
+    <h2>Unmotivational Posters</h2>
+    <div class="bad-poster-grid"></div>
+    <button class="return-to-main">Return to Main</button>
+  </section>
   <script src="./src/main.js"></script>
 </body>
 </html>