My finished pre-work web 102

README.md

@@ -1,19 +1,19 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Funding monster*
 
-Submitted by: **Your Name Here**
+Submitted by: **Minh Nguyen**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Funding monster** 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: **12** 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:
 
@@ -23,10 +23,10 @@ The following **optional** features are implemented:
 
 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' />
+<img src='https://imgur.com/u7OivqR' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+GIF created with ScreenToGif
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows
@@ -35,10 +35,11 @@ GIF created with ...
 ## Notes
 
 Describe any challenges encountered while building the app.
+-Get the function to work properly
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2024] [Sea Monster]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.js

@@ -29,27 +29,29 @@ 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
-
+        let div = document.createElement('div')
 
         // add the class game-card to the list
-
-
+        div.className = 'game-card';
+        div.innerHTML += `<p>Name: ${games[i].name}</p>`;
+        div.innerHTML += `<p>Description: ${games[i].description}</p>`; 
+        div.innerHTML += `<img class="game-img" src="${games[i].img}">`;
         // 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 ("/>")
-
-
+
         // append the game to the games-container
-
+        gamesContainer.appendChild(div);
+    }
 }
 
 // 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,21 +63,21 @@ function addGamesToPage(games) {
 const contributionsCard = document.getElementById("num-contributions");
 
 // use reduce() to count the number of total contributions by summing the backers
-
+let totalContribute = GAMES_JSON.reduce((accumulator,game)=>accumulator+game.backers,0);
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+contributionsCard.innerHTML = `${totalContribute.toLocaleString('en-US')}`;
 
 // grab the amount raised card, then use reduce() to find the total amount raised
 const raisedCard = document.getElementById("total-raised");
-
+let AmountRaised = GAMES_JSON.reduce((accumulator,game)=>accumulator+game.pledged,0);
 // set inner HTML using template literal
-
+raisedCard.innerHTML=` $${AmountRaised.toLocaleString('en-US')}`
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
-
-
+let totalGames = GAMES_JSON.reduce((accumulator)=>accumulator+1,0);
+gamesCard.innerHTML =`${totalGames}`
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
  * total number of contributions, amount donated, and number of games on the site.
@@ -84,32 +86,35 @@ const gamesCard = document.getElementById("num-games");
 
 // show only games that do not yet have enough funding
 function filterUnfundedOnly() {
-    deleteChildElements(gamesContainer);
-
+    deleteChildElements(gamesContainer)
     // use filter() to get a list of games that have not yet met their goal
-
-
+    let listGameUnderPledge = GAMES_JSON.filter((game)=>{
+        return game.pledged < game.goal;
+    })
+    console.log("not make it ",listGameUnderPledge.length)
     // use the function we previously created to add the unfunded games to the DOM
-
+    addGamesToPage(listGameUnderPledge);
 }
-
+console.log(filterUnfundedOnly())
 // show only games that are fully funded
-function filterFundedOnly() {
-    deleteChildElements(gamesContainer);
 
+function filterFundedOnly() {
+    deleteChildElements(gamesContainer)
     // use filter() to get a list of games that have met or exceeded their goal
-
-
+    let listGameOverPledge = GAMES_JSON.filter((game)=>{
+        return game.pledged >= game.goal;
+    })
+    console.log("Make it",listGameOverPledge.length)
     // use the function we previously created to add unfunded games to the DOM
-
+    addGamesToPage(listGameOverPledge)
 }
-
+console.log(filterFundedOnly())
 // show all games
-function showAllGames() {
-    deleteChildElements(gamesContainer);
 
+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 +123,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 +136,18 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
-
+let unFundGames = GAMES_JSON.filter((games)=>{
+    return games.pledged < games.goal;
+});
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+let strExpUnfund=`For now we have ${unFundGames.length} games that in need helping hand so our vision can be achieve!`;
 
 // create a new DOM element containing the template string and append it to the description container
+const paragraphElement = document.createElement("p");
+paragraphElement.textContent = strExpUnfund;
+descriptionContainer.appendChild(paragraphElement);
+
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -149,7 +162,12 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
-
+const[topGame,secondGame,...rest]=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 topGameElement = document.createElement('p')
+topGameElement.textContent = `Top Game: ${topGame.name}`;
+firstGameContainer.appendChild(topGameElement);
+// do the same for the runner up item
+const secondGameElement = document.createElement('p')
+secondGameElement.textContent = `Runner up Game: ${secondGame.name}`;
+secondGameContainer.appendChild(secondGameElement);

style.css

@@ -21,6 +21,11 @@ body {
 
 .stats-container {
     display: flex;
+    align-items: center;
+}
+.stat-containers:hover{
+    cursor:pointer;
+    box-shadow: 0 0  30px lightblue;
 }
 
 .stats-card {