Sea Monster Crowdfunding (web102 prework)

README.md

@@ -1,32 +1,33 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Sea Monster Crowdfunding
 
-Submitted by: **Your Name Here**
+Submitted by: Ruixin Zhang
 
-**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: 14 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.
+* [yes] The introduction section explains the background of the company and how many games remain unfunded.
+* [yes] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
+* [yes] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
+* [yes] 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!
+* [working on it] CSS styling to make the website look more appealing
 
 ## 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='video.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
+
 
 <!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
+GIF created with Kap
 <!-- Recommended tools:
 [Kap](https://getkap.co/) for macOS
 [ScreenToGif](https://www.screentogif.com/) for Windows
@@ -35,10 +36,11 @@ GIF created with ...
 ## Notes
 
 Describe any challenges encountered while building the app.
+In general it was challenging to first process the concepts introduced in the documents and then apply it to my code. 
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2025] [Ruixin Zhang]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.js

@@ -5,6 +5,7 @@
 */
 
 // import the JSON data about the crowd funded games from the games.js file
+//import { createElement } from 'react';
 import GAMES_DATA from './games.js';
 
 // create a list of objects to store the data about the games using JSON.parse
@@ -29,26 +30,22 @@ const gamesContainer = document.getElementById("games-container");
 function addGamesToPage(games) {
 
     // loop over each item in the data
-
-
-        // create a new div element, which will become the game card
-
-
-        // add the class game-card to the list
-
-
-        // 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
+    for (const game of games) {
+        const newElement = document.createElement('div')
+        newElement.classList.add("game-card")
+        newElement.innerHTML = `
+            <img src = "${game.img}" class = "game-img"> 
+            <h3> Name: ${game.name} </h3>
+            <p> Description: ${game.description} </p>
+            <p> Pledged: ${game.pledged} </p>
+            `
+        gamesContainer.appendChild(newElement)
+
+    }
 
 }
 
-// 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,20 +58,26 @@ 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) => {
+    return acc + game.backers
+}, 0);
 
+contributionsCard.innerHTML = `${totalContributions.toLocaleString()}`
 
 // 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");
-
+const totalRaised = GAMES_JSON.reduce ((acc, game) => {
+    return 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");
-
+gamesCard.innerHTML = GAMES_JSON.length
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -85,30 +88,39 @@ const gamesCard = document.getElementById("num-games");
 // show only games that do not yet have enough funding
 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) => {
+        return 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) => {
+        return 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)
 
 }
 
@@ -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,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 numUnfunded = GAMES_JSON.reduce ((acc, game) => {
+    if (game.pledged < game.goal) {
+        return acc + 1;
+    } else {
+        return acc;
+    }
+}, 0)
 
+const numFunded = GAMES_JSON.reduce ((acc, game) => {
+    return acc + game.pledged
+}, 0)
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+let unfundedStr = numUnfunded === 0? `A total of $${numFunded.toLocaleString()} have been raised for all 11 games` : `A total of $${numFunded.toLocaleString()} have been raised for all 11 games. Currently, ${numUnfunded} games remain unfunded.`;
 
 // create a new DOM element containing the template string and append it to the description container
+const unfundedElement = document.createElement('p');
+unfundedElement.innerHTML = unfundedStr;
+descriptionContainer.appendChild(unfundedElement);
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -149,7 +176,15 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
+const [topGame, runnerUp] = sortedGames
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+const topGameElement = document.createElement('p')
+topGameElement.innerHTML = topGame.name
+firstGameContainer.append(topGameElement) //what is the difference b/w using append and appendChild here?
+
 
-// do the same for the runner up item
+// do the same for the runner up item
+const runnerUpElement = document.createElement('p')
+runnerUpElement.innerHTML = runnerUp.name
+secondGameContainer.append(runnerUpElement)

style.css

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