codepath · yawoppongkrampah9 · Jul 15, 2024 · Jul 15, 2024 · Jul 15, 2024 · Jul 15, 2024
diff --git a/Codepathweb.gif b/Codepathweb.gif
diff --git a/README.md b/README.md
@@ -1,40 +1,43 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - * Sea Monster Crowdfunding Website*
 
-Submitted by: **Your Name Here**
+Submitted by: **Yaw Oppong-Krampah**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Sea Monster Crowfunding Website** 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: **10** 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.
+* [Yes] The introduction section explains the background of the company and how many games remain unfunded.
+* [Yes] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
+* [Yes] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
+* [Yes] 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:
+Navigation bar
 
-* [ ] List anything else that you can get done to improve the app functionality!
+* [Add some animations] 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' />
+<img src='Codepathweb.gif' title='Video Walkthrough'>
+
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+GIF created with LiceCap 
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows
-[peek](https://github.com/phw/peek) for Linux. -->
+[peek](https://githu--b.com/phw/peek) for Linux. -->
 
 ## Notes
 
 Describe any challenges encountered while building the app.
+Using the eventlistener function for the show all games, show funded games and other buttons.
 
 ## License
 

diff --git a/index.html b/index.html
@@ -5,20 +5,31 @@
     <meta name="viewport" content="width=device-width">
     <link href="style.css" rel="stylesheet" type="text/css" />
   </head>
-
+    
   <body>
+    <div class = "navbar">
+      <ul>
+        <li><a href="#HOME">HOME</a></li>
+        <li><a href="#About">ABOUT </a></li>
+        <li><a href="#GAMES"> GAMES</a></li>
+      </ul>
+   </div>
     <!-- header row with logo -->
-    <div class="header">
-        <img id="tentacles" src="assets/tentacles.png">
-        <h1 class="header-text">Sea Monster Crowdfunding</h1>
-    </div>
-
+     <div id="HOME">
+        <div class="header">
+            <img id="tentacles" src="assets/tentacles.png">
+            <h1 class="header-text">Sea Monster Crowdfunding</h1>
+        </div>
+     </div>
+
     <!-- background info about company -->
-    <h2>Welcome to Sea Monster!</h2>
-    <div id="description-container">
-        <p>The purpose of our company is to fund independent games. We've been in operation for 12 years.</p>
+    <div id="About">
+        <h2>Welcome to Sea Monster!</h2>
+        <div id="description-container">
+            <p>The purpose of our company is to fund independent games. We've been in operation for 12 years.</p>
+        </div>
     </div>
-
+   
     <!-- top games & other interesting stats -->
     <h2>Stats</h2>
     <div class="stats-container">
@@ -46,19 +57,22 @@ <h3>🥇 Top Funded Game</h3>
             <h3>🥈 Runner Up</h3>
         </div>
     </div>
-
+    
     <!-- list of games funded by Sea Monster -->
-    <h2>Our Games</h2>
-    <p>Check out each of our games below!</p>
-    <div id="button-container">
-        <button id="unfunded-btn">Show Unfunded Only</button>
-        <button id="funded-btn">Show Funded Only</button>
-        <button id="all-btn">Show All Games</button>
-    </div>
-    <div id="games-container">
-
+    <div id="GAMES">
+        <h2>Our Games</h2>
+        <p>Check out each of our games below!</p>
+        <div id="button-container">
+            <button id="unfunded-btn">Show Unfunded Only</button>
+            <button id="funded-btn">Show Funded Only</button>
+            <button id="all-btn">Show All Games</button>
+        </div>
+        <div id="games-container">
+
+        </div>
     </div>
 
-    <script type="module" src="index.js"></script>
+
+ <script type="module" src="index.js"></script>
   </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -3,8 +3,6 @@
  * -> 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
@@ -23,42 +21,58 @@ function deleteChildElements(parent) {
 */
 
 // 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) {
+    // grab the element with the id games-container
+    const gamesContainer = document.getElementById("games-container");
 
     // 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");
+        gameCard.classList.add("game-card");
+
+        // set the inner HTML using a template literal to display info about each game
+        gameCard.innerHTML = `
+            <img src="${game.img}" class="game-img" alt="${game.name} Image">
+            <h3>${game.name}</h3>
+            <p>${game.description}</p>
+            <p>Pledged: $${game.pledged}</p>
+            <p>Goal: $${game.goal}</p>
+            <p>Backers: ${game.backers}</p>
+        `;
+
+        // append the game card to the games-container
+        gamesContainer.appendChild(gameCard);
+    }
+}
 
+// Ensure this is called after the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", function() {
+    const fundedGames = GAMES_JSON.filter(game => game.pledged >= game.goal);
+    addGamesToPage(fundedGames);
+});
 
-        // 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
-
+const totalContributions = GAMES_JSON.reduce( (accumulator, game) => {
+    return accumulator + game.backers;
+  }, 0);
 
 /*************************************************************************************
  * 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");
+contributionsCard.textContent = totalContributions.toLocaleString();
 
 // use reduce() to count the number of total contributions by summing the backers
 
@@ -68,12 +82,17 @@ const contributionsCard = document.getElementById("num-contributions");
 
 // 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((total, game) => total + game.pledged, 0);
+
+// update the raised card with the total amount raised, formatted with a dollar sign
+raisedCard.textContent = `$${totalRaised.toLocaleString()}`;
 
 // set inner HTML using template literal
 
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+gamesCard.textContent = GAMES_JSON.length.toLocaleString();
 
 
 /*************************************************************************************
@@ -84,72 +103,113 @@ const gamesCard = document.getElementById("num-games");
 
 // show only games that do not yet have enough funding
 function filterUnfundedOnly() {
+    // first, delete all current child elements in the gamesContainer
+    const gamesContainer = document.getElementById("games-container");
+
     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
-
+    const unfundedGames = GAMES_JSON.filter(game => game.pledged < game.goal);
+
+    // console.log("Number of unfunded games:", unfundedGames.length);
+    // use the addGamesToPage function to add the unfunded games to the DOM
+    addGamesToPage(unfundedGames);
 }
 
-// show only games that are fully funded
+// initial call to display all games
+// addGamesToPage(GAMES_JSON);
 function filterFundedOnly() {
+    const gamesContainer = document.getElementById("games-container");
+
     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);
+
+    //   console.log("Number of funded games:", fundedGames.length);
     // use the function we previously created to add unfunded games to the DOM
-
+   addGamesToPage(fundedGames);
 }
 
+// // Initial call to display all games
+// addGamesToPage(GAMES_JSON);
 // show all games
 function showAllGames() {
+    const gamesContainer = document.getElementById("games-container");
+
     deleteChildElements(gamesContainer);
 
+    // console.log("Total number of games:", GAMES_JSON.length);
     // 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");
+    // Your JavaScript code here
+    const unfundedBtn = document.getElementById("unfunded-btn");
+    unfundedBtn.addEventListener('click', filterUnfundedOnly);
+
+    const fundedBtn = document.getElementById("funded-btn");
+    fundedBtn.addEventListener('click', filterFundedOnly);
+
+    const allBtn = document.getElementById("all-btn");
+    allBtn.addEventListener('click', showAllGames);
+
+
+
 
-// 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
-
+const unfundedGamesCount = GAMES_JSON.reduce((count, game) => {
+    return game.pledged < game.goal ? count + 1 : count;
+}, 0);
+console.log(`Number of unfunded games: ${unfundedGamesCount}`);
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+const displayStr = `A total amount of $${totalRaised.toLocaleString()} was raised for ${GAMES_JSON.length} games  .As of now ${unfundedGamesCount} remains unfunded ${unfundedGamesCount !== 1 ? '' : ''}. 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 summaryElement = document.createElement('p');
+    summaryElement.textContent = displayStr;
 
+    // Append the new element to the description container
+ descriptionContainer.appendChild(summaryElement);
 /************************************************************************************
  * 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) => {
+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
+let [topGame, runnerUpGame] = sortedGames;
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+const topGameElement = document.createElement("div");
+topGameElement.innerHTML = `
+    <h3>${topGame.name}</h3>
+`;
+
+// Append the new element to the firstGameContainer
+firstGameContainer.appendChild(topGameElement);
+
+// Create a new element for the runner-up game
+const runnerUpGameElement = document.createElement("div");
+runnerUpGameElement.innerHTML = `
+    <h3>${runnerUpGame.name}</h3>
+`;
+
+// Append the new element to the secondGameContainer
+secondGameContainer.appendChild(runnerUpGameElement);
+
+
+// // do the same for the runner up item
 
-// do the same for the runner up item