+${games[i].description}
+Backers: ${games[i].backers}
+ `; // append the game to the games-container + gamesContainer.appendChild(gameCard); + } } // 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 @@ -62,8 +74,12 @@ const contributionsCard = document.getElementById("num-contributions"); // use reduce() to count the number of total contributions by summing the backers +const count = GAMES_JSON.reduce( (acc, game) => { + return acc + game.backers; +}, 0); // set the inner HTML using a template literal and toLocaleString to get a number with commas +contributionsCard.innerHTML = `${count.toLocaleString('en-US')}`; // grab the amount raised card, then use reduce() to find the total amount raised @@ -71,10 +87,14 @@ const raisedCard = document.getElementById("total-raised"); // set inner HTML using template literal +raisedCard.innerHTML = `$${GAMES_JSON.reduce( (acc, game) => { + return acc + game.pledged; +}, 0).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')}`; /************************************************************************************* * Challenge 5: Add functions to filter the funded and unfunded games @@ -87,9 +107,11 @@ 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 => game.pledged < game.goal); // use the function we previously created to add the unfunded games to the DOM + addGamesToPage(unfundedGames); } @@ -98,10 +120,11 @@ 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 => game.pledged >= game.goal); // use the function we previously created to add unfunded games to the DOM - + // use the function we previously created to add the funded games to the DOM + addGamesToPage(fundedGames); } // show all games @@ -109,6 +132,7 @@ function showAllGames() { deleteChildElements(gamesContainer); // add all games from the JSON data to the DOM + addGamesToPage(GAMES_JSON); } @@ -118,6 +142,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); /************************************************************************************* @@ -130,11 +157,16 @@ const descriptionContainer = document.getElementById("description-container"); // use filter or reduce to count the number of unfunded games +const unfundedCount = GAMES_JSON.filter(game => game.pledged < game.goal).length; // create a string that explains the number of unfunded games using the ternary operator +const descriptionText = `We have ${unfundedCount} unfunded games that need your support!`; // create a new DOM element containing the template string and append it to the description container +const descriptionElement = document.createElement("p"); +descriptionElement.innerHTML = descriptionText; +descriptionContainer.appendChild(descriptionElement); /************************************************************************************ * Challenge 7: Select & display the top 2 games @@ -149,7 +181,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 -// do the same for the runner up item \ No newline at end of file +// do the same for the runner up item +const firstGameElement = document.createElement("p"); +firstGameElement.innerHTML = firstGame.name; +firstGameContainer.appendChild(firstGameElement); + +// do the same for the runner up item +const secondGameElement = document.createElement("p"); +secondGameElement.innerHTML = secondGame.name; +secondGameContainer.appendChild(secondGameElement); \ No newline at end of file diff --git a/style.css b/style.css index 11303c2a7..57f0a6d8e 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ body { #tentacles { width: 50px; -} +} .header { display: flex; @@ -19,8 +19,10 @@ body { margin-top: -10px; } -.stats-container { +.stats-container:hover { display: flex; + align-items: center; + box-shadow: 0 0 30px lightblue; } .stats-card {