Completing Prework

README.md

@@ -1,40 +1,39 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - SeaMonster CrowdFunding Site
 
-Submitted by: **Your Name Here**
+Submitted by: **Alyzee Sosa**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**SeaMonster CrowdFunding Site** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
 
-Time spent: **X** hours spent in total
+Time spent: **20** hours spent in total
 
 ## Required Features
 
 The following **required** functionality is completed:
 
-* [ ] The introduction section explains the background of the company and how many games remain unfunded.
-* [ ] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
-* [ ] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
-* [ ] The Our Games section has three buttons that allow the user to display only unfunded games, only funded games, or all games.
+* [x] The introduction section explains the background of the company and how many games remain unfunded.
+* [x] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
+* [x] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
+* [x] The Our Games section has three buttons that allow the user to display only unfunded games, only funded games, or all games.
 
 The following **optional** features are implemented:
 
-* [ ] List anything else that you can get done to improve the app functionality!
+* [x] The Our Games section has an additional filter feature where the user can search through the specific games manually
+* [x] The CSS was modified to create better better UX/UI for the site (i.e user interaction and responsiveness)
 
 ## Video Walkthrough
 
 Here's a walkthrough of implemented features:
 
-<img src='http://i.imgur.com/link/to/your/gif/file.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
+<img src='assets/prework_walkthrough_gif.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
-<!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
-<!-- Recommended tools:
-[Kap](https://getkap.co/) for macOS
-[ScreenToGif](https://www.screentogif.com/) for Windows
-[peek](https://github.com/phw/peek) for Linux. -->
+
+GIF created with LICECap  
 
 ## Notes
 
-Describe any challenges encountered while building the app.
+* Refreshing on Javascript fundamentals after a period of not working on WebDev projects.
+* Transitioning from using traditional JS concepts such as loops and conditionals to more efficient built in methods like reduce() and filter().
+* Conceptualizing the processes behind new methods shows.
 
 ## License
 

index.html

@@ -20,41 +20,54 @@ <h2>Welcome to Sea Monster!</h2>
     </div>
 
     <!-- top games & other interesting stats -->
-    <h2>Stats</h2>
-    <div class="stats-container">
-        <div class="stats-card">
-            <h3>Individual Contributions</h3>
-            <p id="num-contributions">
-            </p>
-        </div>
-        <div class="stats-card">
-            <h3>Total Raised</h3>
-            <p id="total-raised">
-            </p>
-        </div>
-        <div class="stats-card">
-            <h3>Total Number of Games</h3>
-            <p id="num-games">
-            </p>
-        </div>
-    </div>
-    <div class="stats-container" id="top-games">
-        <div class="stats-card" id="first-game">
-            <h3>🥇 Top Funded Game</h3>
+    <h2>Our Company's Stats</h2>
+
+    <div class="stats-body">
+        <div class="stats-container">
+            <div class="stats-card">
+                <h3>Individual Contributions</h3>
+                <p id="num-contributions">
+                </p>
+            </div>
+            <div class="stats-card">
+                <h3>Total Raised</h3>
+                <p id="total-raised">
+                </p>
+            </div>
+            <div class="stats-card">
+                <h3>Total Number of Games</h3>
+                <p id="num-games">
+                </p>
+            </div>
         </div>
-        <div class="stats-card" id="second-game">
-            <h3>🥈 Runner Up</h3>
+        <div class="stats-container" id="top-games">
+            <div class="stats-card" id="first-game">
+                <h3>🥇</h3>
+                <h3>Top Funded Game</h3>
+            </div>
+            <div class="stats-card" id="second-game">
+                <h3>🥈</h3>
+                <h3>Runner Up</h3>
+            </div>
         </div>
     </div>
 
     <!-- list of games funded by Sea Monster -->
     <h2>Our Games</h2>
-    <p>Check out each of our games below!</p>
+    <p id="games-description">Check out each of our games below! We help 
+        fund many amazing projects, ranging from digital games to classic board games!</p>
     <div id="button-container">
+        <p id="search" class="filter-switch">Filter by search!</p>
+        <button id="all-btn">Show All Games</button>
         <button id="unfunded-btn">Show Unfunded Only</button>
         <button id="funded-btn">Show Funded Only</button>
-        <button id="all-btn">Show All Games</button>
     </div>
+
+    <div id="search-container">
+        <p id="funds" class="filter-switch">Filter by fund status!</p>
+        <input type="text" id="search-input" placeholder="🔍 Search here...">
+    </div>
+
     <div id="games-container">
 
     </div>