completed

README.md

@@ -1,10 +1,10 @@
 # WEB102 Prework - *Name of App Here*
 
-Submitted by: **Your Name Here**
+Submitted by: Daniel Choi
 
 **Name of your app** 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: 5 hours spent in total
 
 ## Required Features
 
@@ -34,11 +34,11 @@ GIF created with ...
 
 ## Notes
 
-Describe any challenges encountered while building the app.
+This was a great refresh with JS and HTML.
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright 2023 Daniel Choi
 
     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,7 @@ <h3>🥈 Runner Up</h3>
     <!-- list of games funded by Sea Monster -->
     <h2>Our Games</h2>
     <p>Check out each of our games below!</p>
+    <input type="search" placeholder="Search Games..." id="search" >
     <div id="button-container">
         <button id="unfunded-btn">Show Unfunded Only</button>
         <button id="funded-btn">Show Funded Only</button>

index.js

@@ -29,27 +29,35 @@ const gamesContainer = document.getElementById("games-container");
 function addGamesToPage(games) {
 
     // 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");
 
         // 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 ("/>")
-
+        gameCard.innerHTML = `
+        <img src="${game.img}" alt="${game.name} game cover" class="game-img"/>
+        <h3>${game.name}</h3>
+        <p>${game.description}</p>
+        <p>${game.backers} 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 +69,22 @@ 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( (acc, game) => acc + 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( (acc, game) => acc + 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");
+const totalGames = GAMES_JSON.length
+gamesCard.innerHTML = totalGames.toLocaleString();
 
 
 /*************************************************************************************
@@ -87,29 +98,30 @@ 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
-
+    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,9 @@ 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.
@@ -129,12 +143,16 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
-
+const unfundedCount = GAMES_JSON.reduce((sum, game) => game.pledged < game.goal ? sum + 1 : sum , 0 );
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+const unfundedStatement = `
+A total of $${totalRaised.toLocaleString()} has been raised for ${totalGames} games. Currently, ${unfundedCount} game${unfundedCount == 1 ? "" : "s"} remains 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 unfundedReport = document.createElement("p");
+unfundedReport.innerHTML = `${unfundedStatement}`;
+descriptionContainer.appendChild(unfundedReport);
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -149,7 +167,29 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
+const [firstGame, secondGame, ...rest] = sortedGames;
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+const topGame = document.createElement("p");
+topGame.innerText = firstGame.name;
+firstGameContainer.appendChild(topGame);
+
+// do the same for the runner up item
+const runnerUpGame = document.createElement("p");
+runnerUpGame.innerText = secondGame.name;
+secondGameContainer.appendChild(runnerUpGame);
 
-// do the same for the runner up item
+// search bar
+let searchBar = document.getElementById("search");
+searchBar.addEventListener("change", search)
+
+function search(){
+    console.log(`search is ${searchBar.value}`);
+    deleteChildElements(gamesContainer);
+    const matches = GAMES_JSON.filter((game) => {
+        let query = searchBar.value;
+        return query.length > 0?  game.name.toLowerCase().includes(query.toLowerCase()) : GAMES_JSON;
+
+    })
+    addGamesToPage(matches);
+}

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,16 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+}
+
+button:hover{
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
+}
+
+#search{
+    border-radius:8px;
+    border-color:none;
+    height:40px;
+    width:30%;
 }