From b9e0c3e68db4b80c699db7cd814a168ac7e739ea Mon Sep 17 00:00:00 2001 From: skonda29 Date: Sun, 11 May 2025 21:17:43 -0700 Subject: [PATCH 1/2] prework submission --- index.js | 72 +++++++++++++++++++++++++++++++++---------------------- style.css | 6 ++++- 2 files changed, 49 insertions(+), 29 deletions(-) diff --git a/index.js b/index.js index 86fe7d438..89fff2284 100644 --- a/index.js +++ b/index.js @@ -29,27 +29,31 @@ const gamesContainer = document.getElementById("games-container"); function addGamesToPage(games) { // loop over each item in the data - - + for (let i = 0; i < games.length; i++) { + const game = games[i]; // 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"); + // 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 - + gameCard.innerHTML = ` + ${game.name} +

${game.name}

+

${game.description}

+

Backers: ${game.backers}

`; + + // append the game card to the games container + gamesContainer.appendChild(gameCard); + } } // 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,20 +65,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((sum, game) => sum + game.backers, 0); // set the inner HTML using a template literal and toLocaleString to get a number with commas +contributionsCard.innerHTML = totalContributions.toLocaleString("en-US"); // 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 - +const totalRaised = GAMES_JSON.reduce((sum, game) => sum + game.pledged, 0); +raisedCard.innerHTML = `$${totalRaised.toLocaleString("en-US")}`; // 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 @@ -87,10 +92,10 @@ 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 => game.pledged < game.goal); + console.log("Number of unfunded games:", unfundedGames.length); // use the function we previously created to add the unfunded games to the DOM - + addGamesToPage(unfundedGames); } // show only games that are fully funded @@ -98,10 +103,10 @@ 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 => game.pledged >= game.goal); + console.log("Number of funded games:", fundedGames.length); // use the function we previously created to add unfunded games to the DOM - + addGamesToPage(fundedGames); } // show all games @@ -109,7 +114,7 @@ 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 @@ -118,7 +123,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 +136,15 @@ const allBtn = document.getElementById("all-btn"); const descriptionContainer = document.getElementById("description-container"); // use filter or reduce to count the number of unfunded games - +const numUnfundedGames = GAMES_JSON.filter(game => game.pledged < game.goal).length; // create a string that explains the number of unfunded games using the ternary operator - +const displayStr = `A total of $${totalRaised.toLocaleString("en-US")} has been raised for ${totalGames} games. Currently, ${numUnfundedGames} game${numUnfundedGames === 1 ? "" : "s"} remain${numUnfundedGames === 1 ? "s" : ""} 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 descriptionParagraph = document.createElement("p"); +descriptionParagraph.innerHTML = displayStr; +descriptionContainer.appendChild(descriptionParagraph); /************************************************************************************ * Challenge 7: Select & display the top 2 games * Skills used: spread operator, destructuring, template literals, sort @@ -149,7 +158,14 @@ const sortedGames = GAMES_JSON.sort( (item1, item2) => { }); // use destructuring and the spread operator to grab the first and second games - +const [firstGame, secondGame, ...rest] = sortedGames; // create a new element to hold the name of the top pledge game, then append it to the correct element +const topGameElement = document.createElement("h2"); +topGameElement.textContent = firstGame.name; +firstGameContainer.appendChild(topGameElement); + +// do the same for the runner up item +const runnerGameElement = document.createElement("h2"); +runnerGameElement.textContent = secondGame.name; +secondGameContainer.appendChild(runnerGameElement); -// do the same for the runner up item \ No newline at end of file diff --git a/style.css b/style.css index 11303c2a7..c5cd698d3 100644 --- a/style.css +++ b/style.css @@ -21,8 +21,12 @@ body { .stats-container { display: flex; + align-items: center; +} +.stats-container:hover { + cursor: pointer; + box-shadow: 0 0 30px lightblue; } - .stats-card { background-color: #a8b0bc; border-radius: 7px; From 5acb320c30cb073a261a0dc1cdafe42f6832af7c Mon Sep 17 00:00:00 2001 From: skonda29 Date: Sun, 11 May 2025 21:43:26 -0700 Subject: [PATCH 2/2] Update README in prework submission by skonda29 --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index a12177342..31d036585 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: **Srinitya Kondapally** -**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 App** 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: **2** 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. +* [x] The introduction section explains the background of the company and how many games remain unfunded. +* [x] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games. +* [x] The Our Games section initially displays all games funded by Sea Monster Crowdfunding +* [x] 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,10 +23,10 @@ The following **optional** features are implemented: Here's a walkthrough of implemented features: -Video Walkthrough +Video Walkthrough https://drive.google.com/file/d/1bv6FyLT2EqqM5iL7kKDzfLwvBrbw0mi6/view?usp=sharing -GIF created with ... +