Submission

index.js

@@ -29,25 +29,23 @@ 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
-
-
+        let game_card=document.createElement('div');
         // add the class game-card to the list
-
-
-        // set the inner HTML using a template literal to display some info 
+        game_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
         // between the end of the src attribute and the end of the tag ("/>")
-
-
+        game_card.innerHTML=`<img class ="game-img" src = ${games[i].img} /> <h3>${games[i].name}</h3> ${games[i].description} <br> <br> Backers: ${games[i].backers}`;
         // append the game to the games-container
-
+        document.getElementById('games-container').appendChild(game_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,19 +59,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);
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+contributionsCard.innerHTML=`${totalContributions.toLocaleString('en-US')}`;
 
 // 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);
 
 // set inner HTML using template literal
-
+raisedCard.innerHTML=`$${totalRaised.toLocaleString('en-US')}`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+gamesCard.innerHTML=`${GAMES_JSON.length.toLocaleString('en-US')}`;
 
 
 /*************************************************************************************
@@ -87,29 +87,29 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
+    let gamesLessFund=GAMES_JSON.filter((game)=>game.pledged<game.goal);
 
     // use the function we previously created to add the unfunded games to the DOM
-
+    addGamesToPage(gamesLessFund);
 }
 
 // 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 gamesFullFund=GAMES_JSON.filter((game)=>game.pledged>=game.goal);
 
     // use the function we previously created to add unfunded games to the DOM
-
+    addGamesToPage(gamesFullFund);
 }
 
 // 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
@@ -118,7 +118,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,16 +131,20 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
-
+let unFundedGamesCount= GAMES_JSON.reduce((acc,game)=>game.pledged<game.goal ? acc+=1 : acc ,0);
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+let templateString=`A total of $${totalRaised.toLocaleString('en-US')} has been raised for 
+${GAMES_JSON.length.toLocaleString('en-US')} games. Currently, ${unFundedGamesCount.toLocaleString('en-US')} 
+${unFundedGamesCount===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
-
+let templateStringElement = document.createElement('p');
+templateStringElement.innerHTML=templateString;
+document.getElementById("description-container").appendChild(templateStringElement);
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
- * Skills used: spread operator, destructuring, template literals, sort 
+ * Skills used: spread operator, destructuring, template literals, sort
  */
 
 const firstGameContainer = document.getElementById("first-game");
@@ -149,7 +155,12 @@ 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
+let firstGameName=document.createElement('p');
+firstGameName.innerHTML=firstGame.name;
+firstGameContainer.appendChild(firstGameName);
+// do the same for the runner up item
+let secondGameName=document.createElement('p');
+secondGameName.innerHTML=secondGame.name;
+secondGameContainer.appendChild(secondGameName);

style.css

@@ -21,6 +21,12 @@ body {
 
 .stats-container {
     display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+}
+.stats-container:hover{
+    box-shadow: 0 0 30px lightblue;
 }
 
 .stats-card {
@@ -72,4 +78,5 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+    cursor: pointer;
 }