update

README.md

@@ -1,10 +1,10 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Sea Monster*
 
-Submitted by: **Your Name Here**
+Submitted by: **Mizbah Ateeq**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Sea Monster** 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: **6** hours spent in total
 
 ## Required Features
 
@@ -23,10 +23,11 @@ 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' />
+[https://youtu.be/2wzh5arSTCs](https://youtu.be/zzgUASfiA58)
+
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+Video created with MacOS Screen Recording Tool + YouTube Upload
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows
@@ -36,9 +37,11 @@ GIF created with ...
 
 Describe any challenges encountered while building the app.
 
+I had trouble getting the unfunded and funded buttons to work and making sure to filter them out properly. Also, using new tools like reduce and filter is something I'm still adjusting to and fully grasping. 
+
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2025] [Mizbah Ateeq]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.js

@@ -26,26 +26,34 @@ function deleteChildElements(parent) {
 const gamesContainer = document.getElementById("games-container");
 
 // create a function that adds all data from the games array to the page
-function addGamesToPage(games) {
-
     // loop over each item in the data
+    function addGamesToPage(games) {
+    // Get the container where game cards will be added
+    const container = document.getElementById('games-container');
+
+    // Step 1: Loop over each game in the array
+    for (let i = 0; i < games.length; i++) {
+        const game = games[i];
+
+        // Step 2: Create a new div for the game card
+        const gameCard = document.createElement('div');
+        gameCard.classList.add('game-card');
+
+        // Step 3: Set the innerHTML using a template literal
+        gameCard.innerHTML = `
+            <img src="${game.img}" alt="${game.name}" class="game-img" />
+            <h3>${game.name}</h3>
+            <p>${game.description}</p>
+        `;
+
+        // Add the game card to the container
+        container.appendChild(gameCard);
+    }
+}
 
 
-        // create a new div element, which will become the game card
-
-
-        // add the class game-card to the list
-
-
-        // 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 ("/>")
-
-
-        // append the game to the games-container
 
-}
+addGamesToPage(GAMES_JSON);  
 
 // call the function we just defined using the correct variable
 // later, we'll call this function using a different list of games
@@ -61,19 +69,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((acc, game) => acc + 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
+// use reduce() to find the total amount raised
+const totalRaised = GAMES_JSON.reduce((acc, game) => acc + game.pledged, 0);
 
+// set inner HTML using template literal with dollar sign
+raisedCard.innerHTML = `$${totalRaised.toLocaleString()}`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+const totalGames = GAMES_JSON.length;
+gamesCard.innerHTML = totalGames.toLocaleString();
+
 
 
 /*************************************************************************************
@@ -82,25 +97,29 @@ const gamesCard = document.getElementById("num-games");
  * Skills used: functions, filter
 */
 
+
 // show only games that do not yet have enough funding
 function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
-
+    
     // use filter() to get a list of games that have not yet met their goal
-
-
+    let unfundedGames = GAMES_JSON.filter( (game) => game.pledged < game.goal );
+    console.log("Unfunded games:", unfundedGames);
+
     // use the function we previously created to add the unfunded games to the DOM
-
+    addGamesToPage(unfundedGames);
 }
 
 // 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
-
+    let fundedGames = GAMES_JSON.filter( (game) => game.pledged >= game.goal );
+    console.log("Funded games:", fundedGames);
 
     // use the function we previously created to add unfunded games to the DOM
+    addGamesToPage(fundedGames);
 
 }
 
@@ -109,6 +128,7 @@ function showAllGames() {
     deleteChildElements(gamesContainer);
 
     // add all games from the JSON data to the DOM
+    addGamesToPage(GAMES_JSON);
 
 }
 
@@ -118,6 +138,9 @@ 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 +152,13 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
-
+const unfundedGamesCount = GAMES_JSON.filter(game => game.pledged < game.goal).length;
 
 // create a string that explains the number of unfunded games using the ternary operator
-
-
-// create a new DOM element containing the template string and append it to the description container
+const info = 'The purpose of our company is to fund independent games. We\'ve been in operation for 12 years.';
+const displayStr = `A total of $${totalRaised.toLocaleString()} has been raised for ${totalGames} games. Currently, 
+${unfundedGamesCount} ${unfundedGamesCount === 1 ? "game remains" : "games remain"} unfunded. We need your help to fund these amazing games!`;
+descriptionContainer.innerHTML = `<p>${info}</p><p>${displayStr}</p>`;
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -149,7 +173,15 @@ 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
 
-// do the same for the runner up item
+// create a new element to hold the name of the top pledge game, then append it to the correct element
+const firstGameName = document.createElement("p");
+firstGameName.innerText = firstGame.name;
+firstGameContainer.appendChild(firstGameName);
+
+// do the same for the runner up item
+const secondGameName = document.createElement("p");
+secondGameName.innerText = secondGame.name;
+secondGameContainer.appendChild(secondGameName);

style.css

@@ -21,6 +21,11 @@ body {
 
 .stats-container {
     display: flex;
+    background-color: whitesmoke;
+    align-items: stretch;
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
+
 }
 
 .stats-card {
@@ -72,4 +77,4 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
-}
+}