Final Commit

README.md

@@ -1,10 +1,10 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Sea Monster Crowdfunding Application
 
-Submitted by: **Your Name Here**
+Submitted by: Joel Castro
 
-**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 Application 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: 15 hours spent in total
 
 ## Required Features
 
@@ -15,30 +15,23 @@ The following **required** functionality is completed:
 * [ ] 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:
 
-<img src='http://i.imgur.com/link/to/your/gif/file.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
-<!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
-<!-- Recommended tools:
-[Kap](https://getkap.co/) for macOS
-[ScreenToGif](https://www.screentogif.com/) for Windows
-[peek](https://github.com/phw/peek) for Linux. -->
+<img src="https://github.com/jcas96/web102_prework/blob/main/seamonsterTest.gif"/>
 
-## Notes
+GIF created with ...  QuickTime Player
 
-Describe any challenges encountered while building the app.
+## Notes
+Went through the use of DOM, combining both JavaScript and HTML together.
+Interaction between creating new elements to be displayed in the HTML website, being created in the JS file
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2024] [Joel Castro]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.js

@@ -30,26 +30,37 @@ function addGamesToPage(games) {
 
     // loop over each item in the data
 
+    for (let g = 0; g < games.length; g++) {
+         // create a new div element, which will become the game card
+         let div = document.createElement('div');
+
+         // add the class game-card to the list
+         div.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 ("/>")
+         let display = `
+         <img src="${ games[g].img }" class="game-img">
+         <p>${ games[g].name }</p>
+         <p>Pledged: ${ games[g].pledged }</p>
+         `;
+         div.innerHTML = display;
+
+
+         // append the game to the games-container
+         let gcont = document.getElementById("games-container");
+         gcont.appendChild(div);
 
-        // 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
-
+addGamesToPage(GAMES_JSON);
 
 /*************************************************************************************
  * Challenge 4: Create the summary statistics at the top of the page displaying the
@@ -61,19 +72,28 @@ function addGamesToPage(games) {
 const contributionsCard = document.getElementById("num-contributions");
 
 // use reduce() to count the number of total contributions by summing the backers
+const contributors= GAMES_JSON.reduce((ppl, game)=>{
+    return ppl + game.backers;
+},0);
 
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+contributionsCard.innerHTML = `${contributors.toLocaleString("en-US")}`;
 
 // grab the amount raised card, then use reduce() to find the total amount raised
 const raisedCard = document.getElementById("total-raised");
 
+const donations = GAMES_JSON.reduce((amt,game)=>{
+    return amt + game.pledged;
+},0);
+
 // set inner HTML using template literal
+raisedCard.innerHTML = `$${donations.toLocaleString("en-US")}`;
 
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+gamesCard.innerHTML = GAMES_JSON.length;
 
 
 /*************************************************************************************
@@ -87,9 +107,12 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
+    let unfunded = GAMES_JSON.filter((game)=>{
+        return game.pledged<game.goal;
+    });
 
     // use the function we previously created to add the unfunded games to the DOM
+    addGamesToPage(unfunded);
 
 }
 
@@ -98,26 +121,34 @@ function filterFundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have met or exceeded their goal
+    let funded = GAMES_JSON.filter((game)=>{
+        return game.pledged>=game.goal;
+    });
 
 
     // use the function we previously created to add unfunded games to the DOM
-
+    addGamesToPage(funded);
 }
 
 // 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");
+const searchBtn =document.getElementById('search-btn');
 
 // add event listeners with the correct functions to each button
+unfundedBtn.addEventListener("click",filterUnfundedOnly);
+fundedBtn.addEventListener("click", filterFundedOnly);
+allBtn.addEventListener("click", showAllGames);
 
 
 /*************************************************************************************
@@ -131,11 +162,20 @@ 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
+let unfundedAmt = GAMES_JSON.filter((game)=>{
+    return game.pledged<game.goal;
+}).length;
 
+const displayStr = `A total of $${donations.toLocaleString("en-US")} for ${GAMES_JSON.length} games. Currently, ${unfundedAmt} ${unfundedAmt>1 ? "games":"game"} 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
 
+let p = document.createElement('p');
+p.innerHTML = displayStr;
+descriptionContainer.appendChild(p);
+
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
@@ -149,7 +189,15 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
+const [first, second, ...others] = sortedGames;
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+let firstP = document.createElement('p');
+firstP.innerHTML = first.name;
+firstGameContainer.appendChild(firstP);
+
+// do the same for the runner up item
 
-// do the same for the runner up item
+let secondP = document.createElement('p');
+secondP.innerHTML = second.name;
+secondGameContainer.appendChild(secondP);

style.css

@@ -21,6 +21,12 @@ body {
 
 .stats-container {
     display: flex;
+    align-items: center;
+}
+
+.stats-container :hover{
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
 }
 
 .stats-card {