Huu

README.md

@@ -1,6 +1,6 @@
 # WEB102 Prework - *Name of App Here*
 
-Submitted by: **Your Name Here**
+Submitted by: **Huu Nguyen**
 
 **Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
 
@@ -10,23 +10,26 @@ Time spent: **X** hours spent in total
 
 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] Added progress bar for appeals 
 
 ## 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' />
+https://github.com/user-attachments/assets/bdd07f2d-d5ec-443f-8591-4601815721fb
+
+
+<!-- <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 ...   -->
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows

index.js

@@ -29,6 +29,30 @@ 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 newGameCard = document.createElement("div");
+        const div = moveProgress(games[i].pledged, games[i].goal)
+        const innerContent = `
+            <h2> Name: ${games[i].name} </h2>
+            <img class="game-img" src="${games[i].img}"/>
+            <h3> Description: ${games[i].description}</h3>
+            <h3> Total Pledged: ${games[i].pledged} </h3>
+            <h3> Goal: ${games[i].goal} </h3>
+            ${div}
+            `
+        newGameCard.innerHTML = innerContent;
+        newGameCard.classList.add("game-card");
+
+        gamesContainer.appendChild(newGameCard)
+    }
+    function moveProgress(pledge, goal){
+        let percentage = ((pledge/goal*100) >= 100)? 100 : parseInt((pledge/goal*100));
+        return `
+        <div class="progress">
+            <div class="bar" style="width: ${percentage}%">${percentage}%</div>
+        </div>
+        `
+    }
 
 
         // create a new div element, which will become the game card
@@ -44,9 +68,10 @@ function addGamesToPage(games) {
 
 
         // append the game to the games-container
+        return games.length
 
 }
-
+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,20 +86,24 @@ function addGamesToPage(games) {
 const contributionsCard = document.getElementById("num-contributions");
 
 // use reduce() to count the number of total contributions by summing the backers
-
+contributionsCard.innerText = `${GAMES_JSON.reduce((totalContributers, games) => {
+    return totalContributers + games.backers;
+}, 0).toLocaleString("en-US")}`;
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
 
 
 // grab the amount raised card, then use reduce() to find the total amount raised
 const raisedCard = document.getElementById("total-raised");
-
+raisedCard.innerText = `$${GAMES_JSON.reduce((totalRaised, games)=> {
+    return totalRaised + games.pledged;
+}, 0).toLocaleString('en-US')}`
 // set inner HTML using template literal
 
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
-
+gamesCard.innerText = GAMES_JSON.length
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -86,28 +115,34 @@ const gamesCard = document.getElementById("num-games");
 function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
+    let underRaisedGames = GAMES_JSON.filter( (game)=>{
+        return game.pledged < game.goal;
+    })
+
+    addGamesToPage(underRaisedGames);
     // 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
-
 }
 
 // show only games that are fully funded
 function filterFundedOnly() {
     deleteChildElements(gamesContainer);
-
+    let metFundedGames = GAMES_JSON.filter((game)=>{
+        return game.pledged >= game.goal;
+    })
+    addGamesToPage(metFundedGames);
     // use filter() to get a list of games that have met or exceeded their goal
 
-
     // use the function we previously created to add unfunded games to the DOM
 
 }
 
 // show all games
 function showAllGames() {
     deleteChildElements(gamesContainer);
-
+    addGamesToPage(GAMES_JSON);
     // add all games from the JSON data to the DOM
 
 }
@@ -118,7 +153,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,10 +166,21 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
+const numUnfundedGames = GAMES_JSON.filter( (game)=>{
+    return game.pledged < game.goal;
+});
+
+const totalRaised = GAMES_JSON.reduce((totalRaised, game)=>{
+    return totalRaised + game.pledged;
+},0);
 
 
 // create a string that explains the number of unfunded games using the ternary operator
 
+const displayStr = `A total of $${totalRaised.toLocaleString("en-US")} has been raised for ${GAMES_JSON.length} games. Currently, ${numUnfundedGames.length} ${(numUnfundedGames > 1)? "game remains" : "games remain"} unfunded. We need your help to fund these amazing games!`;
+const donationStr = document.createElement("div");
+donationStr.innerHTML = displayStr;
+descriptionContainer.appendChild(donationStr);
 
 // create a new DOM element containing the template string and append it to the description container
 
@@ -148,8 +196,19 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
     return item2.pledged - item1.pledged;
 });
 
+const [first, second, ...rest] = sortedGames;
+
+function createNewElement(name){
+    const newElement = document.createElement("h4");
+    newElement.innerText = `${name}`
+    return newElement;
+}
+firstGameContainer.appendChild(createNewElement(first.name));
+secondGameContainer.append(createNewElement(second.name));
+
 // use destructuring and the spread operator to grab the first and second games
 
 // 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
+// do the same for the runner up item
+

style.css

@@ -21,6 +21,12 @@ body {
 
 .stats-container {
     display: flex;
+    align-items: center;
+}
+
+.stats-card:hover{
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
 }
 
 .stats-card {
@@ -72,4 +78,18 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+    cursor: pointer;
+}
+
+.progress{
+    width: 100%;
+    background-color: lightgrey;   
+    border-radius: 5px;
+}
+
+.bar{
+    line-height: 30px;
+    text-align: center;
+    background-color: rgb(0, 235, 4);
+    border-radius: inherit;
 }