-
-
-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 - *Name of App Here*
+
+Submitted by: Roel Crodua
+
+**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:
+
+
+
+
+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.
diff --git a/index.js b/index.js
index 86fe7d438..834df05bf 100644
--- a/index.js
+++ b/index.js
@@ -1,155 +1,189 @@
-/*****************************************************************************
- * 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 = 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
+ for (let items in games){
+ // create a new div element, which will become the game card
+ let gamesCard = document.createElement("div");
+
+ // add the class game-card to the list
+ gamesCard.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 ("/>")
+ const img = document.createElement("div")
+ for (let item in games[items]){
+ if (item == "img"){
+ img.innerHTML += `<${item}>${games[items][item]}