WEB102_Prework

README.md

@@ -1,10 +1,10 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Sea Monster Games
 
-Submitted by: **Your Name Here**
+Submitted by: Izayah Rahming
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+Sea Monster Games 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
 
@@ -17,28 +17,31 @@ The following **required** functionality is completed:
 
 The following **optional** features are implemented:
 
-* [ ] List anything else that you can get done to improve the app functionality!
+* [ ] Added a search bar that allows users to type in a game's name and filter the results instantly.
+
 
 ## Video Walkthrough
 
-Here's a walkthrough of implemented features:
+### Here's a walkthrough of all the implemented features:
 
-<img src='http://i.imgur.com/link/to/your/gif/file.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
+<img src='https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExdGxjanFjb2JhNGpoOWN0dHMyeHAwZHV2dWx4MXRhaHk0d3pzbGN2aiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hLH0GocSVRjnn1x5v4/giphy.gif' title='Video Walkthrough' alt='Video Walkthrough' width='900'/>
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+GIF created with GIPHY
 <!-- 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.
+One of the main challenges was figuring out how to correctly filter and display only the unfunded games. Initially, I was using the total contributions, but realized I needed to compare the contributions to the game's funding goal. I solved this by creating a function that iterates through the game data and checks if contributions is less than goal. I then used that function to generate the list of unfunded games when the corresponding button was clicked.
+
+This project was a great way to practice using JavaScript array methods like .filter() and .sort(). I used .filter() extensively to separate the games based on their funding status, which was much more efficient than using a traditional for loop. I also spent a lot of time thinking about the application's logic, specifically how to handle the button clicks. I found that using a single function with a conditional if/else statement for each button made the code much cleaner and easier to manage.
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright 2025, Izayah Rahming, inc.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.html

@@ -50,6 +50,12 @@ <h3>🥈 Runner Up</h3>
     <!-- list of games funded by Sea Monster -->
     <h2>Our Games</h2>
     <p>Check out each of our games below!</p>
+
+    <div class="search-container">
+  <input type="text" id="searchInput" placeholder="Search for games..." />
+  <button id="searchButton">Search</button>
+</div>
+
     <div id="button-container">
         <button id="unfunded-btn">Show Unfunded Only</button>
         <button id="funded-btn">Show Funded Only</button>
@@ -58,6 +64,8 @@ <h2>Our Games</h2>
     <div id="games-container">
 
     </div>
+
+ <p id="noResults" style="display: none;">No games found that match your search.</p>
 
     <script type="module" src="index.js"></script>
   </body>

index.js

@@ -29,23 +29,33 @@ const gamesContainer = document.getElementById("games-container");
 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');
 
-        // create a new div element, which will become the game card
-
-
-        // add the class game-card to the list
+    // 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 
+    gameCard.innerHTML = `
+        <img class="game-img" src="${games[i].img}" alt="${games[i].name}">
+        <h3>${games[i].name}</h3>
+        <p>${games[i].description}</p>
+`;
         // 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
+        gamesContainer.appendChild(gameCard);
 
 }
+}
+
+addGamesToPage(GAMES_JSON);
 
 // call the function we just defined using the correct variable
 // later, we'll call this function using a different list of games
@@ -61,19 +71,21 @@ 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 = `${totalContributions.toLocaleString()}`;
 
 // 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 = `$${totalRaised.toLocaleString()}`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+gamesCard.innerHTML = GAMES_JSON.length;
 
 
 /*************************************************************************************
@@ -87,29 +99,29 @@ 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);
 }
 
 // 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
-
+    // use the function we previously created to add 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,7 +130,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);
+
+
+// Get references to the HTML elements
+const searchInput = document.getElementById('searchInput');
+const gameContainer = document.getElementById('games-container');
+const games = gameContainer.getElementsByClassName('game-card');
+
+searchInput.addEventListener('keyup', function() {
+  const searchTerm = searchInput.value.toLowerCase();
 
+  // Loop through all the game cards
+  for (let i = 0; i < games.length; i++) {
+    // Check the text content of the entire game card
+    const gameContent = games[i].textContent.toLowerCase();
+
+    if (gameContent.includes(searchTerm)) {
+      games[i].style.display = ''; // Show the game card
+    } else {
+      games[i].style.display = 'none'; // Hide the game card
+    }
+  }
+});
 
 /*************************************************************************************
  * Challenge 6: Add more information at the top of the page about the company.
@@ -128,13 +164,17 @@ const allBtn = document.getElementById("all-btn");
 // grab the description container
 const descriptionContainer = document.getElementById("description-container");
 
-// use filter or reduce to count the number of unfunded games
-
+ // use filter or reduce to count the number of unfunded games
+const unfundedGames = GAMES_JSON.filter(game => game.pledged < game.goal);
+const numUnfunded = unfundedGames.length;
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+const displayStr = `A total of $${totalRaised.toLocaleString()} has been raised for ${GAMES_JSON.length} games. Currently, ${numUnfunded} ${numUnfunded === 1 ? 'game' : 'games'} 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 newParagraph = document.createElement("p");
+newParagraph.innerHTML = displayStr;
+descriptionContainer.appendChild(newParagraph);
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -144,12 +184,19 @@ 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;
 });
 
-// use destructuring and the spread operator to grab the first and second games
+// use destructuring to grab the first and second games
+const [firstGameData, secondGameData] = sortedGames;
 
-// create a new element to hold the name of the top pledge game, then append it to the correct element
+// create a new element for the top funded game and append its name
+const firstGameElement = document.createElement('p');
+firstGameElement.innerHTML = firstGameData.name;
+firstGameContainer.appendChild(firstGameElement);
 
-// do the same for the runner up item
+// create a new element for the second most funded game and append its name
+const secondGameElement = document.createElement('p');
+secondGameElement.innerHTML = secondGameData.name;
+secondGameContainer.appendChild(secondGameElement);

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 {
@@ -72,4 +78,21 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+}
+
+.search-container {
+  margin-bottom: 20px;
+}
+
+#searchInput {
+  padding: 8px;
+  width: 250px;
+}
+
+#searchButton {
+  padding: 8px 12px;
+}
+
+.hidden {
+  display: none;
 }