From 3c72b2e1ee1b8eec6430ac15a4a088cfadc93df1 Mon Sep 17 00:00:00 2001 From: yenscastro Date: Sun, 24 Aug 2025 23:42:32 -0700 Subject: [PATCH] Add files via upload --- README.md | 100 ++++++++-------- index.js | 328 +++++++++++++++++++++++++++------------------------ package.json | 6 +- 3 files changed, 223 insertions(+), 211 deletions(-) diff --git a/README.md b/README.md index a12177342..ab6dd8944 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,47 @@ -# WEB102 Prework - *Name of App Here* - -Submitted by: **Your Name Here** - -**Name of your 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 - -## 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 following **optional** features are implemented: - -* [ ] List anything else that you can get done to improve the app functionality! - -## Video Walkthrough - -Here's a walkthrough of implemented features: - -Video Walkthrough - - -GIF created with ... - - -## Notes - -Describe any challenges encountered while building the app. - -## License - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. +# WEB102 Prework - The Sea Monster + + +Submitted by: Yens Castro + +The Sea Monster is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded. + +Time spent: 10 hours spent in total + +## Required Features + +The following **required** functionality is completed: + +* [DONE] The introduction section explains the background of the company and how many games remain unfunded. +* [DONE] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games. +* [DONE] The Our Games section initially displays all games funded by Sea Monster Crowdfunding +* [DONE] 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: + +* [ ] List anything else that you can get done to improve the app functionality! + +## Video Walkthrough + +Here's a walkthrough of implemented features: + +(https://drive.google.com/file/d/1vbJPNOfXwghvVNeOVMvoEt9cP1qBVwT8/view?usp=sharing) + +## Notes + +Describe any challenges encountered while building the app. + +## License + + Copyright [2025] [Yens Castro] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/index.js b/index.js index 86fe7d438..4041c5afe 100644 --- a/index.js +++ b/index.js @@ -1,155 +1,173 @@ -/***************************************************************************** - * Challenge 2: Review the provided code. The provided code includes: - * -> Statements that import data from games.js - * -> A function that deletes all child elements from a parent element in the DOM -*/ - -// import the JSON data about the crowd funded games from the games.js file -import GAMES_DATA from './games.js'; - -// create a list of objects to store the data about the games using JSON.parse -const GAMES_JSON = JSON.parse(GAMES_DATA) - -// remove all child elements from a parent element in the DOM -function deleteChildElements(parent) { - while (parent.firstChild) { - parent.removeChild(parent.firstChild); - } -} - -/***************************************************************************** - * Challenge 3: Add data about each game as a card to the games-container - * Skills used: DOM manipulation, for loops, template literals, functions -*/ - -// grab the element with the id games-container -const gamesContainer = document.getElementById("games-container"); - -// create a function that adds all data from the games array to the page -function addGamesToPage(games) { - - // loop over each item in the data - - - // create a new div element, which will become the game card - - - // add the class game-card to the list - - - // 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 - - -/************************************************************************************* - * Challenge 4: Create the summary statistics at the top of the page displaying the - * total number of contributions, amount donated, and number of games on the site. - * Skills used: arrow functions, reduce, template literals -*/ - -// grab the contributions card element -const contributionsCard = document.getElementById("num-contributions"); - -// use reduce() to count the number of total contributions by summing the backers - - -// set the inner HTML using a template literal and toLocaleString to get a number with commas - - -// 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 - - -// grab number of games card and set its inner HTML -const gamesCard = document.getElementById("num-games"); - - -/************************************************************************************* - * Challenge 5: Add functions to filter the funded and unfunded games - * total number of contributions, amount donated, and number of games on the site. - * Skills used: functions, filter -*/ - -// show only games that do not yet have enough funding -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 - -} - -// 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 - -} - -// show all games -function showAllGames() { - deleteChildElements(gamesContainer); - - // add all games from the JSON data to the DOM - -} - -// select each button in the "Our Games" section -const unfundedBtn = document.getElementById("unfunded-btn"); -const fundedBtn = document.getElementById("funded-btn"); -const allBtn = document.getElementById("all-btn"); - -// add event listeners with the correct functions to each button - - -/************************************************************************************* - * Challenge 6: Add more information at the top of the page about the company. - * Skills used: template literals, ternary operator -*/ - -// grab the description container -const descriptionContainer = document.getElementById("description-container"); - -// use filter or reduce to count the number of unfunded games - - -// create a string that explains the number of unfunded games using the ternary operator - - -// create a new DOM element containing the template string and append it to the description container - -/************************************************************************************ - * Challenge 7: Select & display the top 2 games - * Skills used: spread operator, destructuring, template literals, sort - */ - -const firstGameContainer = document.getElementById("first-game"); -const secondGameContainer = document.getElementById("second-game"); - -const sortedGames = GAMES_JSON.sort( (item1, item2) => { - return item2.pledged - item1.pledged; -}); - -// 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 - -// do the same for the runner up item \ No newline at end of file +/***************************************************************************** + * Challenge 2: Review the provided code. The provided code includes: + * -> Statements that import data from games.js + * -> A function that deletes all child elements from a parent element in the DOM +*/ + +// import the JSON data about the crowd funded games from the games.js file +import GAMES_DATA from './games.js'; + +// create a list of objects to store the data about the games using JSON.parse +const GAMES_JSON = GAMES_DATA; + +// remove all child elements from a parent element in the DOM +function deleteChildElements(parent) { + while (parent.firstChild) { + parent.removeChild(parent.firstChild); + } +} + +/***************************************************************************** + * Challenge 3: Add data about each game as a card to the games-container + * Skills used: DOM manipulation, for loops, template literals, functions +*/ + +// grab the element with the id games-container +const gamesContainer = document.getElementById("games-container"); + +// create a function that adds all data from the games array to the page +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 ("/>") + gameCard.innerHTML = ` + ${game.name} +

${game.name}

+

${game.description}

+

Pledged: $${game.pledged.toLocaleString()}

+

Goal: $${game.goal.toLocaleString()}

+

Backers: ${game.backers}

+ `; + + 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 + * total number of contributions, amount donated, and number of games on the site. + * Skills used: arrow functions, reduce, template literals +*/ + +// grab the contributions card element +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); + +// 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); + +// 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 + * total number of contributions, amount donated, and number of games on the site. + * Skills used: functions, filter +*/ + +// show only games that do not yet have enough funding +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); + // use the function we previously created to add the unfunded games 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 + const fundedGames = GAMES_JSON.filter(game => game.pledged >= game.goal); + + // use the function we previously created to add unfunded games to the DOM + 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"); +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. + * Skills used: template literals, ternary operator +*/ + +// grab the description container +const descriptionContainer = document.getElementById("description-container"); + +// use filter or reduce to count the number of unfunded games +const unfundedGamesCount = GAMES_JSON.filter(game => game.pledged < game.goal).length; + +// create a string that explains the number of unfunded games using the ternary operator +const unfundedInfo = `A total of $${totalRaised.toLocaleString()} has been raised for ${GAMES_JSON.length} games. Currently, ${unfundedGamesCount} game${unfundedGamesCount !== 1 ? 's' : ''} remain${unfundedGamesCount !== 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 infoParagraph = document.createElement("p"); +infoParagraph.textContent = unfundedInfo; +descriptionContainer.appendChild(infoParagraph); + +/************************************************************************************ + * Challenge 7: Select & display the top 2 games + * Skills used: spread operator, destructuring, template literals, sort + */ + +const firstGameContainer = document.getElementById("first-game"); +const secondGameContainer = document.getElementById("second-game"); + +const sortedGames = GAMES_JSON.sort( (item1, item2) => { + return item2.pledged - item1.pledged; +}); + +// 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 firstGameName = document.createElement("p"); +firstGameName.textContent = `${firstGame.name} ($${firstGame.pledged.toLocaleString()})`; +firstGameContainer.appendChild(firstGameName); +// do the same for the runner up item +const secondGameName = document.createElement("p"); +secondGameName.textContent = `${secondGame.name} ($${secondGame.pledged.toLocaleString()})`; +secondGameContainer.appendChild(secondGameName); \ No newline at end of file diff --git a/package.json b/package.json index 472002573..2eac2fd28 100644 --- a/package.json +++ b/package.json @@ -1,3 +1,3 @@ -{ - "type": "module" -} +{ + "type": "module" +}