Main

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "ritwickdey.liveserver"
+    ]
+}

index.js

@@ -1,3 +1,4 @@
+
 /*****************************************************************************
  * Challenge 2: Review the provided code. The provided code includes:
  * -> Statements that import data from games.js
@@ -29,25 +30,36 @@ const gamesContainer = document.getElementById("games-container");
 function addGamesToPage(games) {
 
     // loop over each item in the data
-
+    for(const game of games){
 
         // create a new div element, which will become the game card
-
+const card = document.createElement("div");
 
         // add the class game-card to the list
+card.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
+         // 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 ("/>")
 
+        card.innerHTML = `
+    <img class="game-img" src="${game.img}" alt="${game.name}" />
+    <h3>${game.name}</h3>
+    <p>${game.description}</p>
+    <p>Pledged: $${Number(game.pledged).toLocaleString()} of $${Number(game.goal).toLocaleString()}</p>
+    <p>Backers: ${Number(game.backers).toLocaleString()}</p>
+`;
 
         // append the game to the games-container
 
+gamesContainer.appendChild(card);
+    }
 }
 
 // call the function we just defined using the correct variable
+addGamesToPage(GAMES_JSON);
 // later, we'll call this function using a different list of games
 
 
@@ -61,20 +73,21 @@ 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),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");
-
+const totalRaised = GAMES_JSON.reduce((acc, game) => acc + (game.pledged || 0), 0);
+raisedCard.innerHTML = `$${totalRaised.toLocaleString()}`;
 // 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.toLocaleString()}`;
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -87,9 +100,11 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
+const unfunded = GAMES_JSON.filter(games => Number=(game.pledged) < Number);
+console.log("Unfunded count =",unfunded.length);
 
     // use the function we previously created to add the unfunded games to the DOM
+    addGamesToPage(unfunded);
 
 }
 
@@ -99,8 +114,12 @@ function filterFundedOnly() {
 
     // use filter() to get a list of games that have met or exceeded their goal
 
+    const funded = GAMES_JSON.filter(game => Number(game.pledged) >= Number(game.goal));
+    console.log("funded count =",funded.length);
+
 
     // use the function we previously created to add unfunded games to the DOM
+    addGamesToPage(funded);
 
 }
 
@@ -109,6 +128,7 @@ function showAllGames() {
     deleteChildElements(gamesContainer);
 
     // add all games from the JSON data to the DOM
+     addGamesToPage(GAMES_JSON);
 
 }
 
@@ -118,7 +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);
 
 /*************************************************************************************
  * Challenge 6: Add more information at the top of the page about the company.
@@ -129,13 +151,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 numUnfunded = GAMES_JSON.reduce(
+  (count, game) => count + (Number(game.pledged) < Number(game.goal) ? 1 : 0),
+  0
+);
 
 
 // create a string that explains the number of unfunded games using the ternary operator
+const displayStr = `
+A total of $${GAMES_JSON.reduce((sum, g) => sum + (Number(g.pledged) || 0), 0).toLocaleString()} has been raised for ${GAMES_JSON.length} games.
+Currently, ${numUnfunded} ${numUnfunded === 1 ? "game remains" : "games remain"} unfunded. 
+We need your help to fund ${numUnfunded === 1 ? "this amazing project" : "these amazing projects"}!
+`;
 
 
 // create a new DOM element containing the template string and append it to the description container
-
+const descParagraph = document.createElement("p");
+descParagraph.textContent = displayStr;
+descriptionContainer.appendChild(descParagraph);
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
@@ -149,7 +182,14 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
+const [topGame, runnerUp, ...rest] = [...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
+const topEl = document.createElement("h3");
+topEl.textContent = topGame.name;
+firstGameContainer.appendChild(topEl);
+
+// do the same for the runner up item
+const secondEl = document.createElement("h3");
+secondEl.textContent = runnerUp.name;
+secondGameContainer.appendChild(secondEl);

style.css

@@ -20,9 +20,14 @@ body {
 }
 
 .stats-container {
-    display: flex;
+display: flex;
+align-items: center;
 }
 
+.stats-container:hover {
+cursor: pointer;
+box-shadow: 0 0 30px lightblue;
+}
 .stats-card {
     background-color: #a8b0bc;
     border-radius: 7px;