Pull

README.md

@@ -1,19 +1,19 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Sea Monster Crowdfunding*
 
-Submitted by: **Your Name Here**
+Submitted by: **Rita Ghimire**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Sea Monster Crowdfunding** 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.
+* [*] 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.
 
 The following **optional** features are implemented:
 
@@ -23,7 +23,7 @@ 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='df 2.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
 GIF created with ...  

index.js

@@ -29,23 +29,35 @@ const gamesContainer = document.getElementById("games-container");
 function addGamesToPage(games) {
 
     // loop over each item in the data
-
-
-        // create a new div element, which will become the game card
-
-
+    for(let i = 0; i < games.length; i++){
+        const game = games[i];
+        console.log(game);
+         // create a new div element, which will become the game card
+        const gameCard = document.createElement("div");
         // add the class game-card to the list
+        gameCard.classList.add("game-card");
 
+        gameCard.innerHTML = `
+        <img src = "${game.img}" class = "game-img"/>
+        <h3>${game.name}</h3>
+        <p> Backers: ${game.backers}</p>`;
+        gamesContainer.appendChild(gameCard);
 
+    }
+    }
+    const showAllGame = GAMES_JSON;
+ addGamesToPage(showAllGame);
+
         // 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
 
-}
+
 
 // call the function we just defined using the correct variable
 // later, we'll call this function using a different list of games
@@ -61,20 +73,30 @@ function addGamesToPage(games) {
 const contributionsCard = document.getElementById("num-contributions");
 
 // use reduce() to count the number of total contributions by summing the backers
-
+const totalContribution = 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 = `${totalContribution.toLocaleString()}`;
 
 // grab the amount raised card, then use reduce() to find the total amount raised
+
 const raisedCard = document.getElementById("total-raised");
+const totalRaised = GAMES_JSON.reduce((total, game) => {
+    return total + game.pledged;
+},0);
 
 // set inner HTML using template literal
-
+raisedCard.innerHTML = `${totalRaised.toLocaleString()}`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
 
+gamesCard.innerHTML = `${GAMES_JSON.length}`;
+
+
+
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -86,39 +108,47 @@ const gamesCard = document.getElementById("num-games");
 function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
-    // use filter() to get a list of games that have not yet met their goal
-
-
-    // use the function we previously created to add the unfunded games to the DOM
+    // function filterUnfundedOnly() {
+    //     deleteChildElements(gamesContainer);
+
+        // Get only games where pledged amount is less than the goal
+        const unfundedGames = GAMES_JSON.filter(game => game.pledged < game.goal);
+
+        // 🔑 Secret Key - Log how many games are unfunded
+        console.log("Unfunded games:", unfundedGames.length);
+
+        // Add them 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
-
-
-    // use the function we previously created to add unfunded games to the DOM
-
+    const fundedGames = GAMES_JSON.filter(game => game.pledged >= game.goal);
+    console.log("Unfunded games:", fundedGames.length);
+    addGamesToPage(fundedGames);
 }
 
 // show all games
 function showAllGames() {
     deleteChildElements(gamesContainer);
-
-    // add all games from the JSON data to the DOM
-
+    addGamesToPage(GAMES_JSON);
 }
-
 // 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);
+
 
 /*************************************************************************************
  * Challenge 6: Add more information at the top of the page about the company.
@@ -129,27 +159,63 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
+const numUnfunded = GAMES_JSON.filter(game => game.pledged < game.goal).length;
+
 
 
 // create a string that explains the number of unfunded games using the ternary operator
+const descriptionStr = `
+A total of $${totalRaised.toLocaleString()} has been raised for ${GAMES_JSON.length} games. 
+Currently, ${numUnfunded} ${numUnfunded === 1 ? "game remains" : "games remain"} unfunded. 
+We need your help to fund these amazing games!
+`;
+
 
 
 // create a new DOM element containing the template string and append it to the description container
 
+const descriptionElement = document.createElement("p");
+descriptionElement.innerText = descriptionStr;
+descriptionContainer.appendChild(descriptionElement);
+
+
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
  */
+// Step 1: Sort the games by most funded
+// Sort the games from highest to lowest funded
+// ✅ Step 1: Calculate the top games
+// Sort games by pledged amount
+// Sort games by amount pledged
+// Sort the games from highest to lowest funded
+const sortedGames = [...GAMES_JSON].sort((a, b) => b.pledged - a.pledged);
+
+const [firstGame, secondGame] = sortedGames;
 
+// Get container divs
 const firstGameContainer = document.getElementById("first-game");
 const secondGameContainer = document.getElementById("second-game");
 
-const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
-    return item2.pledged - item1.pledged;
-});
+// Create and append <p> tags with name and pledge amount
+const firstGameName = document.createElement("p");
+firstGameName.textContent = `${firstGame.name} — $${firstGame.pledged.toLocaleString()}`;
+firstGameContainer.appendChild(firstGameName);
+
+const secondGameName = document.createElement("p");
+secondGameName.textContent = `${secondGame.name} — $${secondGame.pledged.toLocaleString()}`;
+secondGameContainer.appendChild(secondGameName);
+
+
+
 
 // use destructuring and the spread operator to grab the first and second games
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+// Destructure the first two games from the sorted list
+
+
+// Create new elements for the top two games
+
+// Log to find the 🔑 Secret Key components
 
-// do the same for the runner up item