diff --git a/README.md b/README.md index a12177342..a53168962 100644 --- a/README.md +++ b/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,16 +17,17 @@ 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: -Video Walkthrough +Video Walkthrough -GIF created with ... +GIF created with GIPHY

Our Games

Check out each of our games below!

+ +
+ + +
+
@@ -58,6 +64,8 @@

Our Games

+ + diff --git a/index.js b/index.js index 86fe7d438..838d922f4 100644 --- a/index.js +++ b/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 = ` + ${games[i].name} +

${games[i].name}

+

${games[i].description}

+`; // 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,10 +99,10 @@ 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 @@ -98,10 +110,10 @@ 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 @@ -109,7 +121,7 @@ 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 \ No newline at end of file +// 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); \ No newline at end of file diff --git a/style.css b/style.css index 11303c2a7..1df8320fd 100644 --- a/style.css +++ b/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; } \ No newline at end of file