+
+
-GIF created with ...
+GIF created with liceCap.
+
${games[i].description}
+Backers: ${games[i].backers}
+Pledged: $${games[i].pledged.toLocaleString()}
+Goal: $${games[i].goal.toLocaleString()}
+ `; + // append the game to the games-container + gamesContainer.appendChild(game); + } } // call the function we just defined using the correct variable // later, we'll call this function using a different list of games - +addGamesToPage(GAMES_JSON); /************************************************************************************* * Challenge 4: Create the summary statistics at the top of the page displaying the @@ -61,19 +70,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((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 = `${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 +raisedCard.innerHTML = `$${GAMES_JSON.reduce((total, game) => { + return total + game.pledged; +}, 0).toLocaleString()}`; // grab number of games card and set its inner HTML const gamesCard = document.getElementById("num-games"); +gamesCard.innerHTML = `${GAMES_JSON.length.toLocaleString()}`; /************************************************************************************* @@ -87,30 +103,41 @@ 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) => { + return game.pledged < game.goal; + }); + console.log(`${unfundedGames} games that are unfunded`); // use the function we previously created to add the unfunded games to the DOM - + addGamesToPage(unfundedGames); } +filterUnfundedOnly(); // call the function to show unfunded games when the page loads // 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 - - + const fundedGames = GAMES_JSON.filter((game) => { + + return game.pledged >= game.goal; + + }); + console.log(`${fundedGames} games that are funded`); // use the function we previously created to add unfunded games to the DOM - + addGamesToPage(fundedGames); } +filterFundedOnly(); // call the function to show funded games when the page loads // show all games function showAllGames() { deleteChildElements(gamesContainer); // add all games from the JSON data to the DOM + addGamesToPage(GAMES_JSON); } +showAllGames(); // call the function to show all games when the page loads +// add event listeners for the funded and unfunded buttons // select each button in the "Our Games" section const unfundedBtn = document.getElementById("unfunded-btn"); @@ -118,6 +145,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 +159,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 unfundedGames = GAMES_JSON.filter((game) => { + return game.pledged < game.goal; +}).length; +console.log(unfundedGames); + + // create a string that explains the number of unfunded games using the ternary operator +// to display the correct pluralization of the word "game" +const descriptionString = `A total of $${GAMES_JSON.reduce((acc, game) => { + return acc + game.pledged; +}, 0).toLocaleString()} has been raised for ${GAMES_JSON.length} games. Currently, we have ${unfundedGames} unfunded game${unfundedGames === 1 ? "" : "s"}.`; // create a new DOM element containing the template string and append it to the description container +const descriptionElement = document.createElement("p"); +descriptionElement.innerHTML = descriptionString; /************************************************************************************ * Challenge 7: Select & display the top 2 games @@ -149,7 +191,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 +const firstGameElement = document.createElement("p"); +firstGameElement.innerHTML = `${firstGame.name} has raised the most money with $${firstGame.pledged.toLocaleString()}.`; + +// do the same for the runner up item +const secondGameElement = document.createElement("p"); +secondGameElement.innerHTML = `${secondGame.name} has raised the second most money with $${secondGame.pledged.toLocaleString()}.`; -// do the same for the runner up item \ No newline at end of file +// append both elements to the correct containers in the DOM +firstGameContainer.appendChild(firstGameElement); +secondGameContainer.appendChild(secondGameElement); diff --git a/style.css b/style.css index 11303c2a7..66af87e13 100644 --- a/style.css +++ b/style.css @@ -21,7 +21,14 @@ body { .stats-container { display: flex; + cursor: pointer; + align-items: center; + box-shadow:0,0,30px ; } + .stats-container:hover{ + box-shadow: 0 0 30px lightblue; + } + .stats-card { background-color: #a8b0bc;