Challenge 5

.vscode/settings.json

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

README.md

@@ -1,44 +1,51 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - _SeaMonsterFundingApp_
 
-Submitted by: **Your Name Here**
+Submitted by: **Sebastián L. Corporán Berríos**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**SeaMonsterFundingApp** 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: **16** 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] Display all games in a dynamically created table
+- [x] Change name of title bar, and add an icon
 
 ## 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/Walkthrough.gif' title='Video Walkthrough' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+
+GIF created with [ScreenToGif](https://www.screentogif.com/) for Windows
+
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows
 [peek](https://github.com/phw/peek) for Linux. -->
 
 ## Notes
 
-Describe any challenges encountered while building the app.
+Some challenges that I encountered were the following:
+
+- Challenge #4: With this challenge, I struggled to understand the problem at first. I initially thought the total money raised had to include only the unfunded games, rather than both funded and unfunded games.
+
+- Displaying each game in a table: This was by far the most difficult challenge I faced. When I clicked the buttons to show only funded or unfunded games, everything worked fine. However, the issue arose when I tried to display all games. If I clicked that button first, it worked as expected. But after displaying only funded or unfunded games, clicking the "Show All Games" button created a second table inside the existing one. This resulted in multiple nested tables being displayed.
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2025] [Sebastián L. Corporán Berríos]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

style.css → css/style.css

@@ -5,6 +5,13 @@ body {
     background-color: #758190;
 }
 
+*{
+    margin-left: 0;
+    margin-right: 0;
+}
+
+
+
 #tentacles {
     width: 50px;
 }
@@ -21,6 +28,14 @@ body {
 
 .stats-container {
     display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    cursor: pointer;
+    box-shadow: 0 0 30px;
+}
+
+.stats-container:hover {
+    color: lightblue;
 }
 
 .stats-card {
@@ -32,7 +47,9 @@ body {
     text-align: center;
 }
 
-#num-contributions, #total-raised, #num-games {
+#num-contributions,
+#total-raised,
+#num-games {
     font-size: 50px;
 }
 
@@ -72,4 +89,30 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+}
+
+img{
+    width: 50%;
+
+}
+
+table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    width: fit-content;
+}
+
+table,
+tr,
+td,
+th,
+tbody,
+thead {
+    border: 1px solid black;
+    text-align: center;
+}
+
+thead th {
+    /* background-color: rgba(26, 26, 27, 0.301); */
+    color: white;
 }

index.html

@@ -1,64 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width">
-    <link href="style.css" rel="stylesheet" type="text/css" />
-  </head>
 
-  <body>
-    <!-- header row with logo -->
-    <div class="header">
-        <img id="tentacles" src="assets/tentacles.png">
-        <h1 class="header-text">Sea Monster Crowdfunding</h1>
-    </div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width" />
+  <link href="./css/style.css" rel="stylesheet" type="text/css" />
+  <title>Sea Monster</title>
+  <link rel="icon" href="./assets/tentacles.png" />
+</head>
 
-    <!-- background info about company -->
-    <h2>Welcome to Sea Monster!</h2>
-    <div id="description-container">
-        <p>The purpose of our company is to fund independent games. We've been in operation for 12 years.</p>
-    </div>
+<body>
+  <!-- header row with logo -->
+  <div class="header">
+    <img id="tentacles" src="./assets/tentacles.png" />
+    <h1 class="header-text">Sea Monster Crowdfunding</h1>
+  </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>
+  <!-- background info about company -->
+  <h2>Welcome to Sea Monster!</h2>
+  <div id="description-container">
+    <p>
+      The purpose of our company is to fund independent games. We've been in
+      operation for 12 years.
+    </p>
+  </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-container" id="top-games">
-        <div class="stats-card" id="first-game">
-            <h3>🥇 Top Funded Game</h3>
-        </div>
-        <div class="stats-card" id="second-game">
-            <h3>🥈 Runner Up</h3>
-        </div>
+    <div class="stats-card">
+      <h3>Total Raised</h3>
+      <p id="total-raised"></p>
     </div>
-
-    <!-- list of games funded by Sea Monster -->
-    <h2>Our Games</h2>
-    <p>Check out each of our games below!</p>
-    <div id="button-container">
-        <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 class="stats-card">
+      <h3>Total Number of Games</h3>
+      <p id="num-games"></p>
     </div>
-    <div id="games-container">
-
+  </div>
+  <div class="stats-container" id="top-games">
+    <div class="stats-card" id="first-game">
+      <h3>🥇 Top Funded Game</h3>
+    </div>
+    <div class="stats-card" id="second-game">
+      <h3>🥈 Runner Up</h3>
     </div>
+  </div>
+
+  <!-- list of games funded by Sea Monster -->
+  <h2>Our Games</h2>
+  <p>Check out each of our games below!</p>
+  <div id="button-container">
+    <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="games-container"></div>
+
+  <script type="module" src="./js/index.js"></script>
+</body>
 
-    <script type="module" src="index.js"></script>
-  </body>
 </html>