+
GIF created with ...
-
+[peek](https://github.com/phw/peek) for Linux.
## Notes
@@ -38,7 +35,7 @@ Describe any challenges encountered while building the app.
## License
- Copyright [yyyy] [name of copyright owner]
+ Copyright [2023] [codepath]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
diff --git a/assets/Peek 2023-11-22 13-20.gif b/assets/Peek 2023-11-22 13-20.gif
new file mode 100644
index 000000000..2b70959b1
Binary files /dev/null and b/assets/Peek 2023-11-22 13-20.gif differ
diff --git a/index.js b/index.js
index 86fe7d438..f051d6151 100644
--- a/index.js
+++ b/index.js
@@ -29,26 +29,31 @@ const gamesContainer = document.getElementById("games-container");
function addGamesToPage(games) {
// loop over each item in the data
-
-
+ for (let i=0; iDescription: ${game.description}
+Pledged: $${game.pledged}
+Goal: $${game.goal}
+ `; // append the game to the games-container - + document.getElementById("games-container").appendChild(gameCardDiv); + } } // 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); /************************************************************************************* @@ -61,20 +66,21 @@ function addGamesToPage(games) { const contributionsCard = document.getElementById("num-contributions"); // use reduce() to count the number of total contributions by summing the backers - +const totalBackers = GAMES_JSON.reduce((sum, game) => sum + game.backers, 0); // set the inner HTML using a template literal and toLocaleString to get a number with commas - +contributionsCard.innerHTML = `${totalBackers.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((sum, game) => sum + 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"); - +const totalGames = GAMES_JSON.length; +gamesCard.innerHTML = `${totalGames}`; /************************************************************************************* * Challenge 5: Add functions to filter the funded and unfunded games @@ -83,33 +89,33 @@ const gamesCard = document.getElementById("num-games"); */ // show only games that do not yet have enough funding -function filterUnfundedOnly() { +function filterUnfundedOnly(games) { deleteChildElements(gamesContainer); // use filter() to get a list of games that have not yet met their goal - + const unfundedGames = games.filter(game => game.pledged < game.goal); // use the function we previously created to add the unfunded games to the DOM - + return addGamesToPage(unfundedGames); } // show only games that are fully funded -function filterFundedOnly() { +function filterFundedOnly(games) { deleteChildElements(gamesContainer); // use filter() to get a list of games that have met or exceeded their goal - + const fundedGames = games.filter(game => game.pledged >= game.goal); // use the function we previously created to add unfunded games to the DOM - + return addGamesToPage(fundedGames); } // show all games -function showAllGames() { +function showAllGames(games) { deleteChildElements(gamesContainer); // add all games from the JSON data to the DOM - + return addGamesToPage(games); } // select each button in the "Our Games" section @@ -118,7 +124,17 @@ 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', function () { + filterUnfundedOnly(GAMES_JSON); +}); +fundedBtn.addEventListener('click', function () { + filterFundedOnly(GAMES_JSON); +}); + +allBtn.addEventListener('click', function () { + showAllGames(GAMES_JSON); +}); /************************************************************************************* * Challenge 6: Add more information at the top of the page about the company. @@ -129,13 +145,21 @@ const allBtn = document.getElementById("all-btn"); const descriptionContainer = document.getElementById("description-container"); // use filter or reduce to count the number of unfunded games - +const unfundedGamesArray = GAMES_JSON.filter(game => game.pledged < game.goal); +const unfundedCount = unfundedGamesArray.length; +const unfundedRaised = unfundedGamesArray.reduce((sum, game) => sum + game.pledged, 0); // create a string that explains the number of unfunded games using the ternary operator - +const unfundedString = unfundedCount > 0 ? + `A total of $${totalRaised.toLocaleString("en-US")} has been raised for + ${totalGames} games. Currently, ${unfundedCount} game${unfundedCount > 1 ? "s" : ""} + remain unfunded. We need your help to fund these amazing games!` + : "All games are funded." // create a new DOM element containing the template string and append it to the description container - + const descriptionElement = document.createElement("p") + descriptionElement.innerHTML = unfundedString; + descriptionContainer.appendChild(descriptionElement); /************************************************************************************ * Challenge 7: Select & display the top 2 games * Skills used: spread operator, destructuring, template literals, sort @@ -149,7 +173,14 @@ const sortedGames = GAMES_JSON.sort( (item1, item2) => { }); // use destructuring and the spread operator to grab the first and second games +let [topFundedGame, secondTopFundedGame, ...remainingGames] = 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 firstElement = document.createElement("p") +firstElement.innerHTML = topFundedGame.name; +firstGameContainer.appendChild(firstElement); + +// do the same for the runner up item +const secondElement = document.createElement("p") +secondElement.innerHTML = secondTopFundedGame.name; +secondGameContainer.appendChild(secondElement); \ No newline at end of file diff --git a/style.css b/style.css index 11303c2a7..02c1874fb 100644 --- a/style.css +++ b/style.css @@ -21,6 +21,9 @@ body { .stats-container { display: flex; + align-items: center; + cursor: pointer; + box-shadow: 0 0 30px lightblue; } .stats-card { @@ -72,4 +75,8 @@ button { padding: 1%; margin: 1%; border-radius: 7px; +} + +button:hover { + cursor: pointer; } \ No newline at end of file