${game.description}
+Pledged: $${Number(game.pledged).toLocaleString()} of $${Number(game.goal).toLocaleString()}
+Backers: ${Number(game.backers).toLocaleString()}
+`; // 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 \ No newline at end of file +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); diff --git a/style.css b/style.css index 11303c2a7..60f43991b 100644 --- a/style.css +++ b/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;