Web102_prework

README.md

@@ -1,19 +1,19 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Octo*
 
-Submitted by: **Your Name Here**
+Submitted by: **Baria Mustafa**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Octo** 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
 
 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,10 +23,10 @@ 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' />
+<img src='https://imgur.com/a/yi0sX6F' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+GIF created with Kap
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows
@@ -36,9 +36,11 @@ GIF created with ...
 
 Describe any challenges encountered while building the app.
 
+The most challenging hurdle was allocating time to sit down and complete the assignment. However, once I found both the time and motivation, I was able to finish it promptly.
+
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2024] [Baria Mustafa]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.js

@@ -2,10 +2,11 @@
  * 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';
+import games 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)
@@ -16,11 +17,10 @@ function deleteChildElements(parent) {
         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");
@@ -29,87 +29,105 @@ const gamesContainer = document.getElementById("games-container");
 function addGamesToPage(games) {
 
     // loop over each item in the data
-
+    for(let i = 0; i < games.length; i++) {
+         let game = games[i];
 
         // create a new div element, which will become the game card
-
+        let 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 
+        // 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}" alt="${game.name}" class="game-img"/>
+            <h2>${game.name}</h2>
+            <p>${game.description}</p>
+            <p>Backers: ${game.backers}</p>
+            <p>Pledged: $${game.pledged.toLocaleString()}</p>`;
         // append the game to the games-container
 
+        gamesContainer.appendChild(gameCard);
+    }
 }
-
 // call the function we just defined using the correct variable
+addGamesToPage(GAMES_JSON)
 // 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
-
+    let totalContributions = GAMES_JSON.reduce((total, game) => {
+        return total + game["backers"];
+    }, 0);
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+    contributionsCard.innerHTML = `${totalContributions.toLocaleString()} contributions`;
 
 // 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) => {
+        return total + game["pledged"];
+    }, 0);
 // set inner HTML using template literal
 
-
+raisedCard.innerHTML = `${totalRaised.toLocaleString()} raised`;
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
-
-
+    let totalGames = GAMES_JSON.reduce((total)=> {
+        return total+1
+    },0);
+    gamesCard.innerHTML =`${totalGames}`
 /*************************************************************************************
  * 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 filter() to get a list of games that have not yet met their goal
+    let unfundedGames = GAMES_JSON.filter((game) => {
+        return game.pledged < game.goal
+    });
+    //
+    console.log("Number of games unfunded " + unfundedGames.length);
 
     // 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) => {
+        return game.pledged >= game.goal
+    });
 
     // use the function we previously created to add unfunded games to the DOM
-
+    console.log("Number of funded games: " + fundedGames.length);
+    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,27 +136,31 @@ 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 unfundedGames = GAMES_JSON.filter(game => game.pledged < game.goal);
 // create a string that explains the number of unfunded games using the ternary operator
-
-
+    let numOfUnfundedGames = unfundedGames.length;
+    const displayStr = `A total of $${totalRaised.toLocaleString()} has been raised for ${totalGames}. Currently, ${numOfUnfundedGames} 
+    remain unfunded. We need your help to fun these amazing games!`
 // create a new DOM element containing the template string and append it to the description container
-
+    let newTemp = document.createElement('p');
+    newTemp.innerHTML = displayStr;
+    descriptionContainer.appendChild(newTemp)
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
- * Skills used: spread operator, destructuring, template literals, sort 
+ * Skills used: spread operator, destructuring, template literals, sort
  */
 
 const firstGameContainer = document.getElementById("first-game");
@@ -149,7 +171,12 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
-
+const [firstGame, secondGame, ...others] = sortedGames
 // 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
+const firstGameElement = document.createElement('p');
+firstGameElement.textContent = `${firstGame.name}: $${firstGame.pledged.toLocaleString()}`;
+firstGameContainer.appendChild(firstGameElement);
+// do the same for the runner-up item
+const secondGameElement = document.createElement('p');
+secondGameElement.textContent = `${secondGame.name}: $${secondGame.pledged.toLocaleString()}`;
+secondGameContainer.appendChild(secondGameElement);