Final PR

README.md

@@ -1,19 +1,19 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Ahmed Hejazi Kilani
 
-Submitted by: **Your Name Here**
+Submitted by: Ahmed Hejazi Kilani
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+GameFO 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: 6 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.
+* [x] The introduction section explains the background of the company and how many games remain unfunded.
+* [x] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
+* [x] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
+* [x] 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:
 
@@ -23,22 +23,18 @@ The following **optional** features are implemented:
 
 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' />
+https://imgur.com/a/JqKUbMd
+
+GIF created with ... ScreenToGif 
 
-<!-- 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. -->
 
 ## Notes
 
 Describe any challenges encountered while building the app.
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2024] [Ahmed Hejazi Kilani]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.js

@@ -1,3 +1,4 @@
+console.log("Code is executed");
 /*****************************************************************************
  * Challenge 2: Review the provided code. The provided code includes:
  * -> Statements that import data from games.js
@@ -27,29 +28,33 @@ 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++) {
         // 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 ("/>")
-
+        // about each game, including image and at least 2 other attributes
+        gameCard.innerHTML = `
+            <img src="${games[i].img}" alt="${games[i].name}" class="game-img" />
+            <h2>${games[i].name}</h2>
+            <p>Description: ${games[i].description}</p>
+            <p>Backers: ${games[i].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
-
+addGamesToPage(GAMES_JSON);
 
 /*************************************************************************************
  * Challenge 4: Create the summary statistics at the top of the page displaying the
@@ -61,19 +66,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((sum, game) => sum + game.backers, 0);
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+contributionsCard.innerHTML = `<h3>${totalContributions.toLocaleString()}</h3>`;
 
 // 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((sum, game) => sum + game.pledged, 0);
 
 // set inner HTML using template literal
-
+raisedCard.innerHTML = `<h3>$${totalRaised.toLocaleString()}</h3>`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+const totalGames = GAMES_JSON.length;
+
+// set inner HTML using template literal
+gamesCard.innerHTML = `<h3>${totalGames}</h3>`;
+
 
 
 /*************************************************************************************
@@ -86,30 +97,31 @@ const gamesCard = document.getElementById("num-games");
 function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
-    // use filter() to get a list of games that have not yet met their goal
-
+    // 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
+    // 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
-
-
-    // use the function we previously created to add unfunded games to the DOM
+    // 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 the funded 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
@@ -118,24 +130,39 @@ 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
+// Grab the description container from the DOM
 const descriptionContainer = document.getElementById("description-container");
 
-// use filter or reduce to count the number of unfunded games
+// Use reduce to count the number of unfunded games
+const unfundedGamesCount = GAMES_JSON.reduce((count, game) => {
+  // Check if the game is unfunded and increment the count accordingly
+  return game.pledged < game.goal ? count + 1 : count;
+}, 0);
 
+// Calculate the total number of games available
+// Remove the existing declaration of 'totalGames'
+// const totalGames = GAMES_JSON.length;
 
-// create a string that explains the number of unfunded games using the ternary operator
+// Create a string describing the funding status using a ternary operator
+const displayStr = `A total of $${totalRaised.toLocaleString()} has been raised for ${totalGames} ${totalGames === 1 ? 'game' : 'games'}. Currently, ${unfundedGamesCount} ${unfundedGamesCount === 1 ? 'game remains' : 'games remain'} unfunded. We need your help to fund these amazing games!`;
 
+// Create a new paragraph element to display the information
+const newParagraph = document.createElement('p');
 
-// create a new DOM element containing the template string and append it to the description container
+// Set the text content of the paragraph to the display string
+newParagraph.textContent = displayStr;
 
+// Append the new paragraph to the description container
+descriptionContainer.appendChild(newParagraph);
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
@@ -149,7 +176,32 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // 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
+// use destructuring and the spread operator to grab the first and second games
+const [firstGame, secondGame, ...rest] = sortedGames;
+
+// Secret key component 1
+const firstWordMostFunded = firstGame.name.split(" ")[0];
+
+// Secret key component 2
+const firstWordSecondMostFunded = secondGame.name.split(" ")[0];
+// create a new element for the top funded game
+const firstGameElement = document.createElement('div');
+firstGameElement.innerHTML = `
+    <p>Name: ${firstGame.name}</p>
+`;
+
+// append the top funded game element to the first game container
+firstGameContainer.appendChild(firstGameElement);
+
+// create a new element for the second most funded game
+const secondGameElement = document.createElement('div');
+secondGameElement.innerHTML = `
+    <p>Name: ${secondGame.name}</p>
+`;
+
+// append the second most funded game element to the second game container
+secondGameContainer.appendChild(secondGameElement);
+
+// Secret key component 3
+const restArray = [...rest];
+const restValue = restArray.length;

style.css

@@ -72,4 +72,15 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+}
+
+/* additions made by me*/
+.stats-containers {
+    display: flex;
+    align-items: center;
+}
+
+.stats-container:hover {
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
 }