Challenge 3 and 4

README.md

@@ -1,44 +1,38 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Sea Monster Crowdfunding*
 
-Submitted by: **Your Name Here**
+Submitted by: **Faizan Khan**
 
-**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** 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: 20 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 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!
+* [❎] 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' />
+Walkthrough: https://i.imgur.com/NqGiPFg.mp4
 
-<!-- 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. -->
+## Challenges
+One of the primary challenges I faced during the development of the Sea Monster Crowdfunding website was understanding and effectively utilizing game objects. Initially, I struggled with defining the different properties and methods associated with game objects and how they interacted within the application. This required me to do a deep dive into object-oriented programming concepts to ensure that each game's data was accurately represented and manipulated. Additionally, I encountered difficulties with JavaScript functions, particularly filter and reduce. These functions were crucial for managing and displaying dynamic game data, such as filtering games based on their funding status and aggregating financial statistics. Learning to use these functions correctly involved understanding their syntax and behavior in challenge 5, which was a significant learning curve.
 
-## Notes
-
-Describe any challenges encountered while building the app.
+Another challenge was grasping how various pieces of code integrated to form the overall design of the website. This involved not only understanding the individual functionalities but also how they worked together to create a seamless user experience. I had to double check that the code for displaying game statistics, display the game list. This required a comprehensive understanding of both the front-end components of the application and how they interact. As well as balancing these elements while maintaining a clear and user-friendly design tested my problem-solving skills and patience but ultimately contributed to a deeper understanding of web development as a whole.
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2024] [Faizan Khan]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.html

@@ -59,6 +59,7 @@ <h2>Our Games</h2>
 
     </div>
 
+    <script type="module" src="games.js"></script>
     <script type="module" src="index.js"></script>
   </body>
-</html>
+</html>

index.js

@@ -29,27 +29,36 @@ 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 ("/>")
-
+        gameCard.innerHTML = `<img src="${game.img}" class="game-img" alt="${game.name}">
+                             <h3>${game.name}</h3>
+                             <p>${game.description}</p>
+                             <p>Backers: ${game.backers}</p>`
+        ;
 
         // append the game 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
-
+const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
+    return item2.pledged - item1.pledged;
+});
+addGamesToPage(sortedGames);
 
 /*************************************************************************************
  * Challenge 4: Create the summary statistics at the top of the page displaying the
@@ -61,19 +70,25 @@ 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((total, game) => total + game.backers, 0);
 
 
-// set the inner HTML using a template literal and toLocaleString to get a number with commas
 
+// 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");
+let totalRaised = GAMES_JSON.reduce((total, game) => total + game.pledged, 0);
 
-// set inner HTML using template literal
 
 
+// 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 = `${sortedGames.length.toLocaleString()}`;
 
 
 /*************************************************************************************
@@ -87,20 +102,24 @@ 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);
+    console.log(unfundedGames.length);
 }
 
 // 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);
+    console.log(fundedGames.length);
 
 }
 
@@ -109,7 +128,8 @@ function showAllGames() {
     deleteChildElements(gamesContainer);
 
     // add all games from the JSON data to the DOM
-
+    deleteChildElements(gamesContainer);
+    addGamesToPage(GAMES_JSON);
 }
 
 // select each button in the "Our Games" section
@@ -118,7 +138,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,12 +151,21 @@ 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 numFundedGames = GAMES_JSON.length - numUnfundedGames;
+totalRaised = GAMES_JSON.reduce((total, game) => total + game.pledged, 0).toLocaleString();
+
+const description = `A total of ${totalRaised} has been raised for ${sortedGames.length} games. Currently, ${numUnfundedGames} game${numUnfundedGames === 1 ? '' : 's'} 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
+const paragraph = document.createElement("p");
+paragraph.innerHTML = description;
+
+descriptionContainer.appendChild(paragraph);
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -144,12 +175,24 @@ const descriptionContainer = document.getElementById("description-container");
 const firstGameContainer = document.getElementById("first-game");
 const secondGameContainer = document.getElementById("second-game");
 
-const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
+/*const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
     return item2.pledged - item1.pledged;
-});
+});*/
+
+//addGamesToPage(sortedGames);
 
 // use destructuring and the spread operator to grab the first and second games
+let [firstGames, secondGames, ...otherGames] = sortedGames;
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+// Create and append the top game name
+const firstGame= document.createElement('div');
+firstGame.textContent = firstGames.name;
+firstGameContainer.appendChild(firstGame);
+
 
-// do the same for the runner up item
+// do the same for the runner up item
+// Create and append the second top game name
+const secondGame= document.createElement('div');
+secondGame.textContent = secondGames.name;
+secondGameContainer.appendChild(secondGame);

style.css

@@ -21,6 +21,13 @@ body {
 
 .stats-container {
     display: flex;
+    align-items: center;
+    cursor: pointer; 
+    transition: box-shadow 0.3s ease;
+}
+
+.stats-container:hover {
+    box-shadow: 0 0 30px lightblue;
 }
 
 .stats-card {
@@ -72,4 +79,4 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
-}
+}