codepath · waynebin · May 9, 2025 · May 10, 2025 · May 10, 2025 · May 10, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}
diff --git a/MonsterJam_WalkThrough.gif b/MonsterJam_WalkThrough.gif
diff --git a/MonsterJam_WalkThrough2.gif b/MonsterJam_WalkThrough2.gif
diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Monster Jam
 
-Submitted by: **Your Name Here**
+Submitted by: **Duwayne Gray**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Monster Jam** 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: **10** 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:
 
@@ -23,10 +23,10 @@ The following **optional** features are implemented:
 
 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='./MonsterJam_WalkThrough2.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+GIF created with liceCap. 
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows
@@ -36,6 +36,7 @@ GIF created with ...
 
 Describe any challenges encountered while building the app.
 
+
 ## License
 
     Copyright [yyyy] [name of copyright owner]
@@ -51,3 +52,4 @@ Describe any challenges encountered while building the app.
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
+
diff --git a/index.html b/index.html
@@ -1,15 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width">
     <link href="style.css" rel="stylesheet" type="text/css" />
+    <title>Sea Monster Crowdfunding</title>
   </head>
 
   <body>
     <!-- header row with logo -->
     <div class="header">
-        <img id="tentacles" src="assets/tentacles.png">
+        <img id="tentacles" src="assets/tentacles.png" alt="Sea Monster Crowdfunding logo">
         <h1 class="header-text">Sea Monster Crowdfunding</h1>
     </div>
 

diff --git a/index.js b/index.js
@@ -29,27 +29,36 @@ const gamesContainer = document.getElementById("games-container");
 function addGamesToPage(games) {
 
     // loop over each item in the data
-
+       for (let i = 0; i < games.length; i++) {
 
         // create a new div element, which will become the game card
+        const game = document.createElement("div");
 
 
         // add the class game-card to the list
-
+        game.classList.add("game-card");
 
         // set the inner HTML using a template literal to display some info 
         // about each game
-        // TIP: if your images are not displaying, make sure there is space
-        // between the end of the src attribute and the end of the tag ("/>")
-
+        game.innerHTML = `
+            <img class="game-img" src="${games[i].img}" alt="${games[i].name}">
+            <h2 class="game-name">${games[i].name}</h2>
+            <p class="game-description">${games[i].description}</p>
+            <p class="game-details">Backers: ${games[i].backers}</p>
+            <p class="game-details">Pledged: $${games[i].pledged.toLocaleString()}</p>
+            <p class="game-details">Goal: $${games[i].goal.toLocaleString()}</p>
+        `;
+
 
         // append the game to the games-container
+        gamesContainer.appendChild(game);
+       }
 
 }
 
 // call the function we just defined using the correct variable
 // later, we'll call this function using a different list of games
-
+addGamesToPage(GAMES_JSON);
 
 /*************************************************************************************
  * Challenge 4: Create the summary statistics at the top of the page displaying the
@@ -61,19 +70,26 @@ function addGamesToPage(games) {
 const contributionsCard = document.getElementById("num-contributions");
 
 // use reduce() to count the number of total contributions by summing the backers
-
+const totalContributions = GAMES_JSON.reduce((total, game) => {
+    return total + game.backers;
+}, 0);
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
+contributionsCard.innerHTML = `${totalContributions.toLocaleString()}`;
 
 
 // grab the amount raised card, then use reduce() to find the total amount raised
 const raisedCard = document.getElementById("total-raised");
 
 // set inner HTML using template literal
+raisedCard.innerHTML = `$${GAMES_JSON.reduce((total, game) => {
+    return total + game.pledged;
+}, 0).toLocaleString()}`;
 
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+gamesCard.innerHTML = `${GAMES_JSON.length.toLocaleString()}`;
 
 
 /*************************************************************************************
@@ -87,37 +103,51 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
-
+    const unfundedGames = GAMES_JSON.filter((game) => {
+        return game.pledged < game.goal;
+    });
+    console.log(`${unfundedGames} games that are unfunded`);
     // use the function we previously created to add the unfunded games to the DOM
-
+    addGamesToPage(unfundedGames);
 }
+filterUnfundedOnly(); // call the function to show unfunded games when the page loads
 
 // show only games that are fully funded
 function filterFundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have met or exceeded their goal
-
-
+    const fundedGames = GAMES_JSON.filter((game) => {
+
+        return game.pledged >= game.goal;
+
+    });
+    console.log(`${fundedGames} games that are funded`);
     // use the function we previously created to add unfunded games to the DOM
-
+    addGamesToPage(fundedGames);
 }
+filterFundedOnly(); // call the function to show funded games when the page loads
 
 // show all games
 function showAllGames() {
     deleteChildElements(gamesContainer);
 
     // add all games from the JSON data to the DOM
+    addGamesToPage(GAMES_JSON);
 
 }
+showAllGames(); // call the function to show all games when the page loads
+// add event listeners for the funded and unfunded buttons
 
 // select each button in the "Our Games" section
 const unfundedBtn = document.getElementById("unfunded-btn");
 const fundedBtn = document.getElementById("funded-btn");
 const allBtn = document.getElementById("all-btn");
 
 // add event listeners with the correct functions to each button
+unfundedBtn.addEventListener("click", filterUnfundedOnly);
+fundedBtn.addEventListener("click", filterFundedOnly);
+allBtn.addEventListener("click",showAllGames);
 
 
 /*************************************************************************************
@@ -129,12 +159,24 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
+const unfundedGames = GAMES_JSON.filter((game) => {
+    return game.pledged < game.goal;
+}).length;
+console.log(unfundedGames);
+
+
 
 
 // create a string that explains the number of unfunded games using the ternary operator
+// to display the correct pluralization of the word "game"
+const descriptionString = `A total of $${GAMES_JSON.reduce((acc, game) => {
+    return acc + game.pledged;
+}, 0).toLocaleString()} has been raised for ${GAMES_JSON.length} games. Currently, we have ${unfundedGames} unfunded game${unfundedGames === 1 ? "" : "s"}.`;
 
 
 // create a new DOM element containing the template string and append it to the description container
+const descriptionElement = document.createElement("p");
+descriptionElement.innerHTML = descriptionString;
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -149,7 +191,16 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
+const [firstGame, secondGame] = [...sortedGames];
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+const firstGameElement = document.createElement("p");
+firstGameElement.innerHTML = `${firstGame.name} has raised the most money with $${firstGame.pledged.toLocaleString()}.`;
+
+// do the same for the runner up item
+const secondGameElement = document.createElement("p");
+secondGameElement.innerHTML = `${secondGame.name} has raised the second most money with $${secondGame.pledged.toLocaleString()}.`;
 
-// do the same for the runner up item
+// append both elements to the correct containers in the DOM
+firstGameContainer.appendChild(firstGameElement);
+secondGameContainer.appendChild(secondGameElement);
diff --git a/style.css b/style.css
@@ -21,7 +21,14 @@ body {
 
 .stats-container {
     display: flex;
+    cursor: pointer;
+    align-items: center;
+    box-shadow:0,0,30px ;
 }
+    .stats-container:hover{
+        box-shadow: 0 0 30px lightblue;
+    }
+
 
 .stats-card {
     background-color: #a8b0bc;