Karl Fallenius

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

README.md

@@ -1,46 +1,23 @@
-# 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?)
-
+[/x/]: <> (Briefly describe what you built and its features. What problem is the app solving? How does this application solve that problem?)
+Here we have a wonderful application devoted to providing its users with a randomized source of motivation and inspiration. From the homepage our users can choose to create random motivational posters that pull from a curated collection of images, titles, and quotes to build an image that is sure to brighten your day(or at least make you laugh). You can also create your own custom posters using whatever image and text you can come up with. The sky is the limit! Whenever you either stumble across a randomly generated poster that really speaks to you, or you create a poster that you are especially proud of, you can save the poster and return to it later in our Saved Posters gallery. But that's not all! For those who are less inclined towards positivity, we also provide our users with a gallery filled with Anti-Motivational to peruse at their whim. Are you in the mood to destroy some negativity? Well then wait until you hear this, when a user double clicks on one of our Anti-Motivational Posters, it will disapear forever (or at least until you completely reload the page)!
 ### Installation Instructions:
-[//]: <> (What steps does a person have to take to get your app cloned down and running?)
-
+[/x/]: <> (What steps does a person have to take to get your app cloned down and running?)
+To access this application, please clone down a copy from this [GitHub repository](https://github.com/SmilodonP/hanging-in-there). Once that is complete, from your terminal, cd into the project file and enter "code ." into your terminal. This will open the project in your VSCode. From here simply right click on the "index.html" file and select "Open With Live Server". This should open the application in a new browser window where you can interact with it to your heart's content. If you do not have the Live Server VSCode extension installed, you can use the alternative method of navigating to the "Run" column at the top of the page and clicking "Run Without Debugging".
 ### Preview of App:
 [//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off. gifs preferred!)
-
+![Karl's app gif](./assets/app.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?)
-
+This was our first project in the second module of The Turing School of Software & Design's fullstack software engineering program, and the first front end project that we have been assigned. We were given 10 days to complete the project.
 ### Contributors:
 [//]: <> (Who worked on this application? Link to your GitHub. Consider also providing LinkedIn link)
-
+I worked on this project by myself. My name is Karl. [Github](https://github.com/SmilodonP) | [LinkedIn](https://www.linkedin.com/in/karlfallenius/)
 ### Learning Goals:
 [//]: <> (What were the learning goals of this project? What tech did you work with?)
-
+This was a brown field project that tested and grew our ability to read, understand, and work with code that was already written by someone else, and then to extrapolate upon the given code, establishing and expanding its functionality. We worked with JavaScript, HTML, & CSS.
 ### 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?)
+This was by far my most successful project at Turing to date. This feels extra special as I am brand new to working with these languages. I am really proud of everything I accomplished with this project. 

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">Anti-Motivational 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>Anti-Motivational Posters</h2>
+    <div class="unmotivational-posters-grid" data-delete="zoom"></div>
+    <button class="hide-unmotivational">Back to Main</button>
+  </section>
   <script src="./src/main.js"></script>
 </body>
 </html>