Trong Le - Web102 Prework PR

README.md

@@ -1,32 +1,35 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Sea Monster Crowdfunding
 
-Submitted by: **Your Name Here**
+Submitted by: Trong Le
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+Sea Monster Crowdfunding 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: 6 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:
 
-* [ ] List anything else that you can get done to improve the app functionality!
-
+* [X] User can search for a specific game they have heard of by inputing the part of the name in search bar
+* [X] The nav bar at the top of the page to get to the Our Game section quickly
+* [X] Update the CSS of the site to make it more visually appealing by adding hover, change text size and color
 ## Video Walkthrough
 
-Here's a walkthrough of implemented features:
+Here's a walkthrough of implemented features: https://imgur.com/a/elhmPFi
+
+<img src='https://imgur.com/a/elhmPFi' title='Video Walkthrough' width='' alt='Video Walkthrough' />
+
 
-<img src='http://i.imgur.com/link/to/your/gif/file.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+GIF created with licecap and imgur 
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows

index.html

@@ -12,14 +12,29 @@
         <img id="tentacles" src="assets/tentacles.png">
         <h1 class="header-text">Sea Monster Crowdfunding</h1>
     </div>
+    <!-- navigation bar -->
+    <nav class= "main-nav" class="hide-on-scroll">
+        <ul class="nav-list">
+            <li><a href="#background">Background</a></li>
+            <li><a href="#stats">Stats</a></li>
+            <li><a href="#ourGames">Our Games</a></li>
+        </ul>
+        <div class="search-bar">
+            <input type="text" id="game-search" placeholder="Search for a game...">
+            <button id="search-button">Search</button>
+        </div>
+    </nav>
 
     <!-- background info about company -->
+    <section id="background">
     <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>
+    </section>
 
     <!-- top games & other interesting stats -->
+    <section id="stats">
     <h2>Stats</h2>
     <div class="stats-container">
         <div class="stats-card">
@@ -46,8 +61,10 @@ <h3>🥇 Top Funded Game</h3>
             <h3>🥈 Runner Up</h3>
         </div>
     </div>
+    </section>
 
     <!-- list of games funded by Sea Monster -->
+    <section id="ourGames">
     <h2>Our Games</h2>
     <p>Check out each of our games below!</p>
     <div id="button-container">
@@ -58,6 +75,7 @@ <h2>Our Games</h2>
     <div id="games-container">
 
     </div>
+    </section>
 
     <script type="module" src="index.js"></script>
   </body>

index.js

@@ -29,27 +29,29 @@ const gamesContainer = document.getElementById("games-container");
 function addGamesToPage(games) {
 
     // loop over each item in the data
-
-
+    for (let game of games) {
         // 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}" class="game-img" />
+            <h2>${game.name}</h2>
+            <p>Description: ${game.description}</p>
+            <p>Dledged: ${game.pledged}</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,20 +63,27 @@ 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((accumulator, game) => {
+    return accumulator + game.backers;
+}, 0);
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
-
+contributionsCard.innerHTML = `${ totalContributions.toLocaleString('en-US') }`;
 // grab the amount raised card, then use reduce() to find the total amount raised
 const raisedCard = document.getElementById("total-raised");
+const totalRaisedCard = GAMES_JSON.reduce((accumulator, game) => {
+    return accumulator + game.pledged;
+}, 0);
 
 // set inner HTML using template literal
-
+raisedCard.innerHTML = `$${ totalRaisedCard.toLocaleString('en-US') }`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
-
+const totalGames = GAMES_JSON.reduce((accumulator, game) => {
+    return accumulator + 1;
+}, 0);
+gamesCard.innerHTML = `${ totalGames }`
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -87,29 +96,33 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
+    let listOfUnfundedGames = GAMES_JSON.filter ( (game) => {
+        return game.goal > game.pledged;
+      });
 
     // use the function we previously created to add the unfunded games to the DOM
-
+    addGamesToPage(listOfUnfundedGames);
 }
 
 // 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
-
+    let listOfFundedGames = GAMES_JSON.filter ( (game) => {
+        return game.goal <= game.pledged;
+      });
 
     // use the function we previously created to add unfunded games to the DOM
-
+    addGamesToPage(listOfFundedGames);
 }
 
 // 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,6 +131,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);
 
 
 /*************************************************************************************
@@ -129,13 +145,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 numberOfUnfundedGames = GAMES_JSON.reduce((count, game) => {
+    return game.pledged < game.goal ? count + 1 : count} , 0);
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+const displayStr = `A total of $${totalRaisedCard.toLocaleString('en-US')} has been raised for ${ totalGames } games. Currently, ${ numberOfUnfundedGames } ${ numberOfUnfundedGames === 1 ? 'games remain' : 'game 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 descriptionParagraph = document.createElement("p");
+descriptionParagraph.innerHTML = displayStr;
+document.getElementById("description-container").appendChild(descriptionParagraph);
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
@@ -149,7 +168,25 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
-
+const [firstGame, secondGame, ...remainingGames] = 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 firstGameNameElement = document.createElement("p");
+firstGameNameElement.innerHTML = firstGame.name;
+firstGameContainer.appendChild(firstGameNameElement);
+// do the same for the runner up item
+const secondGameNameElement = document.createElement("p");
+secondGameNameElement.innerHTML = secondGame.name;
+secondGameContainer.appendChild(secondGameNameElement);
+
+document.getElementById("search-button").addEventListener("click", function () {
+    const searchTerm = document.getElementById("game-search").value;
+    if (searchTerm) {
+        // use filter() to get a list of games that search term in name
+        let listOfSearchGames = GAMES_JSON.filter ( (game) => {
+            return game.name.toLowerCase().includes(searchTerm);
+          });
+        // display search game
+        deleteChildElements(gamesContainer);
+        addGamesToPage(listOfSearchGames);
+    } else showAllGames();
+});

style.css

@@ -21,15 +21,26 @@ body {
 
 .stats-container {
     display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.5rem; /* Increase padding for more spacing */
+    border-radius: 7px;
+    transition: background-color 0.3s ease;
+}
+
+.stats-container:hover {
+    background-color: #2980b9; /* A darker shade on hover */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .stats-card {
-    background-color: #a8b0bc;
+    background-color: #ecf0f1; /* A lighter gray */
     border-radius: 7px;
-    padding: 1%;
-    margin: 1%;
+    padding: 1rem;
+    margin: 0.5rem;
     width: 100%;
     text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 #num-contributions, #total-raised, #num-games {
@@ -72,4 +83,63 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+}
+
+.main-nav {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-left: -10px;
+    margin-right: -10px;
+}
+
+.nav-list {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+}
+
+.nav-list li {
+    display: inline;
+    margin-right: 20px;
+}
+
+.nav-list li a {
+    text-decoration: none;
+    color: white;
+    font-size: 20px;
+    transition: color 0.3s ease;
+}
+
+.nav-list li a:hover {
+    color: #61dafb;
+}
+
+.search-bar {
+    margin-top: 20px;
+    text-align: center;
+}
+
+#game-search {
+    padding: 10px;
+    width: 300px;
+    border: none;
+    border-radius: 5px;
+}
+
+#search-button {
+    padding: 10px 20px;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+#search-button:hover {
+    background-color: #2980b9;
 }