-
-
-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.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" +}