diff --git a/README.md b/README.md
index a12177342..7dfcc71de 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,19 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Sea Monster Crowdfunding*
-Submitted by: **Your Name Here**
+Submitted by: **Rita Ghimire**
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Sea Monster Crowdfunding** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
-Time spent: **X** hours spent in total
+Time spent: **20** hours spent in total
## Required Features
The following **required** functionality is completed:
-* [ ] The introduction section explains the background of the company and how many games remain unfunded.
-* [ ] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
-* [ ] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
-* [ ] The Our Games section has three buttons that allow the user to display only unfunded games, only funded games, or all games.
+* [*] The introduction section explains the background of the company and how many games remain unfunded.
+* [*] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
+* [*] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
+* [*] The Our Games section has three buttons that allow the user to display only unfunded games, only funded games, or all games.
The following **optional** features are implemented:
@@ -23,7 +23,7 @@ The following **optional** features are implemented:
Here's a walkthrough of implemented features:
-
+
GIF created with ...
diff --git a/index.js b/index.js
index 86fe7d438..c72095860 100644
--- a/index.js
+++ b/index.js
@@ -29,23 +29,35 @@ const gamesContainer = document.getElementById("games-container");
function addGamesToPage(games) {
// loop over each item in the data
-
-
- // create a new div element, which will become the game card
-
-
+ for(let i = 0; i < games.length; i++){
+ const game = games[i];
+ console.log(game);
+ // create a new div element, which will become the game card
+ const gameCard = document.createElement("div");
// add the class game-card to the list
+ gameCard.classList.add("game-card");
+ gameCard.innerHTML = `
+
+
Backers: ${game.backers}
`; + gamesContainer.appendChild(gameCard); + } + } + const showAllGame = GAMES_JSON; + addGamesToPage(showAllGame); + // 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 ("/>") // append the game to the games-container -} + // call the function we just defined using the correct variable // later, we'll call this function using a different list of games @@ -61,20 +73,30 @@ function addGamesToPage(games) { const contributionsCard = document.getElementById("num-contributions"); // use reduce() to count the number of total contributions by summing the backers - +const totalContribution = 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 = `${totalContribution.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((total, game) => { + return total + game.pledged; +},0); // 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}`; + + + /************************************************************************************* * Challenge 5: Add functions to filter the funded and unfunded games @@ -86,32 +108,36 @@ const gamesCard = document.getElementById("num-games"); function filterUnfundedOnly() { deleteChildElements(gamesContainer); - // use filter() to get a list of games that have not yet met their goal - - - // use the function we previously created to add the unfunded games to the DOM + // function filterUnfundedOnly() { + // deleteChildElements(gamesContainer); + + // Get only games where pledged amount is less than the goal + const unfundedGames = GAMES_JSON.filter(game => game.pledged < game.goal); + + // 🔑 Secret Key - Log how many games are unfunded + console.log("Unfunded games:", unfundedGames.length); + + // Add them to the DOM + addGamesToPage(unfundedGames); + } + -} // 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 - - - // use the function we previously created to add unfunded games to the DOM - + const fundedGames = GAMES_JSON.filter(game => game.pledged >= game.goal); + console.log("Unfunded games:", fundedGames.length); + addGamesToPage(fundedGames); } // 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 const unfundedBtn = document.getElementById("unfunded-btn"); const fundedBtn = document.getElementById("funded-btn"); @@ -119,6 +145,10 @@ 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,27 +159,63 @@ 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.filter(game => game.pledged < game.goal).length; + // create a string that explains the number of unfunded games using the ternary operator +const descriptionStr = ` +A total of $${totalRaised.toLocaleString()} has been raised for ${GAMES_JSON.length} games. +Currently, ${numUnfunded} ${numUnfunded === 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 +const descriptionElement = document.createElement("p"); +descriptionElement.innerText = descriptionStr; +descriptionContainer.appendChild(descriptionElement); + + /************************************************************************************ * Challenge 7: Select & display the top 2 games * Skills used: spread operator, destructuring, template literals, sort */ +// Step 1: Sort the games by most funded +// Sort the games from highest to lowest funded +// ✅ Step 1: Calculate the top games +// Sort games by pledged amount +// Sort games by amount pledged +// Sort the games from highest to lowest funded +const sortedGames = [...GAMES_JSON].sort((a, b) => b.pledged - a.pledged); + +const [firstGame, secondGame] = sortedGames; +// Get container divs const firstGameContainer = document.getElementById("first-game"); const secondGameContainer = document.getElementById("second-game"); -const sortedGames = GAMES_JSON.sort( (item1, item2) => { - return item2.pledged - item1.pledged; -}); +// Create and appendtags with name and pledge amount +const firstGameName = document.createElement("p"); +firstGameName.textContent = `${firstGame.name} — $${firstGame.pledged.toLocaleString()}`; +firstGameContainer.appendChild(firstGameName); + +const secondGameName = document.createElement("p"); +secondGameName.textContent = `${secondGame.name} — $${secondGame.pledged.toLocaleString()}`; +secondGameContainer.appendChild(secondGameName); + + + // use destructuring and the spread operator to grab the first and second games // create a new element to hold the name of the top pledge game, then append it to the correct element +// Destructure the first two games from the sorted list + + +// Create new elements for the top two games + +// Log to find the 🔑 Secret Key components -// do the same for the runner up item \ No newline at end of file