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: -Video Walkthrough +Video Walkthrough 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 = ` + +

${game.name}

+

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 append

tags 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