codepath · riz1k · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025
diff --git a/README.md b/README.md
@@ -1,40 +1,42 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Sea Monster Crowdfunding, LLC*
 
-Submitted by: **Your Name Here**
+Submitted by: **Rizky Said**
 
-**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, LLC** 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: **17** 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] List anything else that you can get done to improve the app functionality!
+* [x] Added a scale property on CSS file to make each .game-card class pop up when hovering over them.
 
 ## 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' />
+<img src='walkthrough.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
-<!-- Recommended tools:
+GIF created with:  
+
 [Kap](https://getkap.co/) for macOS
-[ScreenToGif](https://www.screentogif.com/) for Windows
-[peek](https://github.com/phw/peek) for Linux. -->
 
 ## Notes
 
 Describe any challenges encountered while building the app.
+- One of the most challenging parts was extracting data from the GAMES_JSON file and manipulating the objects given into index.js. This is my first time working with two javascript files and 'importing' the files together.
+- I had to learn Javascript lessons on my own using Mimo.org to freshen up my JS skills before tackling the prework, that way I got more comfortable doing the prework while gaining real-world training. This will make the transition easier as I learn React in the next chapter of this course.
+- Getting a grasp of using Git through GitHub is another challenge that I still need to comprehend. Through many  YouTube videos, I will get the hang of Git. This is my second attempt to commit from VSCode to GitHub correctly after making an erroneous command prompt to the demise of my terminal.
 
 ## License
 

diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width">
     <link href="style.css" rel="stylesheet" type="text/css" />
+    <title>Sea Monster Crowdfunding, LLC</title>
   </head>
 
   <body>

diff --git a/index.js b/index.js
@@ -5,6 +5,7 @@
 */
 
 // import the JSON data about the crowd funded games from the games.js file
+import games from './games.js'
 import GAMES_DATA from './games.js';
 
 // create a list of objects to store the data about the games using JSON.parse
@@ -29,26 +30,36 @@ 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];
+        console.log(game);    
 
         // 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}" class="game-img" alt="${game.name}">
+            <h3>${game.name}</h3>
+            <p>${game.description}</p>
+            <p><strong>Goal:</strong> $${game.goal}</p>
+            <p><strong>Pledged:</strong> $${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);
 
 
 /*************************************************************************************
@@ -61,19 +72,22 @@ function addGamesToPage(games) {
 const contributionsCard = document.getElementById("num-contributions");
 
 // use reduce() to count the number of total contributions by summing the backers
-
+let contributions = 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 = `${contributions.toLocaleString('en-US')}`;
 
 // grab the amount raised card, then use reduce() to find the total amount raised
 const raisedCard = document.getElementById("total-raised");
+let raised = GAMES_JSON.reduce((acc, game) => acc + game.pledged, 0);
 
 // set inner HTML using template literal
-
+raisedCard.innerHTML = `$${raised.toLocaleString('en-US')}`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+const numGames = GAMES_JSON.length;
+gamesCard.innerHTML = `${numGames}`;
 
 
 /*************************************************************************************
@@ -87,29 +101,31 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
+    let unfunded = GAMES_JSON.filter(game => game.pledged < game.goal);
+    console.log(unfunded);
 
     // use the function we previously created to add the unfunded games to the DOM
-
+    addGamesToPage(unfunded);
 }
 
 // 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 funded = GAMES_JSON.filter(game => game.pledged >= game.goal);
+    console.log(funded);
 
     // use the function we previously created to add unfunded games to the DOM
-
+    addGamesToPage(funded);
 }
 
 // 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 +134,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 +147,25 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
+const unfundedGames = GAMES_JSON.filter(game => game.pledged < game.goal);
+const numUnfundedGames = unfundedGames.length;
 
+// use filter or reduce to count the number of funded games
+const fundedGames = GAMES_JSON
+    .filter(game =>game.pledged >= game.goal)
+    .reduce((sum, game) => sum + game.pledged, 0);
+const numFundedGames = GAMES_JSON.filter(game => game.pledged >= game.goal).length;
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+const message = `
+A total of $${raised.toLocaleString('en-US')} has been raised for ${numGames} game${numGames !== 1 ? 's' : ''}. 
+Currently, ${numUnfundedGames} game${numUnfundedGames !== 1 ? 's remain' : '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 newParagraph = document.createElement('p');
+newParagraph.innerHTML = message;
+descriptionContainer.appendChild(newParagraph);
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -149,7 +180,14 @@ 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
-
-// do the same for the runner up item
+const newParagraphFirst = document.createElement('p');
+newParagraphFirst.innerHTML = `${firstGame.name}`;
+firstGameContainer.appendChild(newParagraphFirst);
+
+// do the same for the runner up item
+const newParagraphSecond = document.createElement('p');
+newParagraphSecond.innerHTML = `${secondGame.name}`;
+secondGameContainer.appendChild(newParagraphSecond);
diff --git a/style.css b/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 {
@@ -55,11 +61,13 @@ body {
     width: 300px;
     text-align: center;
     border-radius: 7px;
+    transition: transform 0.3s ease, box-shadown 0.3s ease;
 }
 
 .game-card:hover {
     cursor: pointer;
     box-shadow: 0 0 30px lightblue;
+    transform: scale(1.3);
 }
 
 #button-container {
@@ -72,4 +80,19 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
+}
+
+#unfunded-btn:hover {
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
+}
+
+#funded-btn:hover {
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
+}
+
+#all-btn:hover {
+    cursor: pointer;
+    box-shadow: 0 0 30px lightblue;
 }
diff --git a/walkthrough.gif b/walkthrough.gif