Challenges 1-5 Completed on 04/26/2025

README.md

@@ -1,41 +1,49 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Game Card Funding*
 
-Submitted by: **Your Name Here**
+Submitted by: **Orgito Vuktilaj**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Game Card Funding** 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-7** hours spent in total (I'm not actually sure, I didn't keep track)
 
 ## 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] Extra functions that store values, eliminating the need for complex functions to be executed repeatedly for the same data to show.
+* [x] Changed background color to more deep-sea vibe because that's where sea monsters usually are.
+* [ ] Unfunded Filter uses whole 1st row and leaves second to be uneven. Add a function to sort this out. I'd like to learn how to do this properly.
 
 ## 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='assets/2025-05-01 23-19-00.mp4' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
-<!-- Replace this with whatever GIF tool you used! -->
-GIF created with ...  
-<!-- Recommended tools:
-[Kap](https://getkap.co/) for macOS
-[ScreenToGif](https://www.screentogif.com/) for Windows
-[peek](https://github.com/phw/peek) for Linux. -->
+Video Created with OBS.
 
 ## Notes
 
 Describe any challenges encountered while building the app.
 
+1. Most of my issues arised when trying to understand the way certain functions worked and how they were to be implemented (for example the .filter() and .reduce() functions).
+    a. Simple googles and questions to ChatGPT helped me get past this obstacle.
+2. Displaying funding information in the description-container was difficult because:
+    a. I needed to figure out a simple (to me) way to correct the grammar based on the numbers that were showing.
+        a1. I set a default value for the variables and appended strings to them according to the number of funded/unfunded games that were on record.
+    b. Because the filterUnfundedOnly() function would only execute once the respective button was clicked, the funding information would say there were 0 unfunded games.
+        b1. I made the text pop up only once one of the filter buttons were clicked.
+        b2. I saved the numbers to a global variable so that the function wouldn't NEED to be executed each time (meaning the number was only retrieved once because it still does execute each time you activate the filters).
+3. Completely new to using GitHub/Bash functionalities and the link on the prework document no longer functioned.
+    a. I used a different online tutorial to teach me the basics of GitHub and GitBash. I already had GitBash installed from trying it other times and I got the hang of it fairly quickly.
+
 ## License
 
     Copyright [yyyy] [name of copyright owner]

index.js

@@ -1,155 +1,155 @@
-/*****************************************************************************
- * Challenge 2: Review the provided code. The provided code includes:
- * -> Statements that import data from games.js
- * -> A function that deletes all child elements from a parent element in the DOM
-*/
-
-// import the JSON data about the crowd funded games from the games.js file
 import GAMES_DATA from './games.js';
-
-// create a list of objects to store the data about the games using JSON.parse
 const GAMES_JSON = JSON.parse(GAMES_DATA)
 
-// remove all child elements from a parent element in the DOM
-function deleteChildElements(parent) {
-    while (parent.firstChild) {
-        parent.removeChild(parent.firstChild);
-    }
-}
-
-/*****************************************************************************
- * Challenge 3: Add data about each game as a card to the games-container
- * Skills used: DOM manipulation, for loops, template literals, functions
-*/
-
-// grab the element with the id games-container
+// Game Cards area
 const gamesContainer = document.getElementById("games-container");
+addGamesToPage(GAMES_JSON);
 
-// create a function that adds all data from the games array to the page
-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
-
-}
-
-// call the function we just defined using the correct variable
-// later, we'll call this function using a different list of games
-
-
-/*************************************************************************************
- * Challenge 4: Create the summary statistics at the top of the page displaying the
- * total number of contributions, amount donated, and number of games on the site.
- * Skills used: arrow functions, reduce, template literals
-*/
-
-// grab the contributions card element
+//Main Information Cards
 const contributionsCard = document.getElementById("num-contributions");
-
-// use reduce() to count the number of total contributions by summing the backers
-
-
-// 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
+contributionsCard.innerHTML = `${GAMES_JSON.reduce( (acc, game) => { return acc + game.backers; }, 0).toLocaleString("en-US")}`;
 const raisedCard = document.getElementById("total-raised");
-
-// set inner HTML using template literal
-
-
-// grab number of games card and set its inner HTML
+raisedCard.innerHTML = `$${GAMES_JSON.reduce( (acc, game) => { return acc + game.pledged; }, 0).toLocaleString("en-US")}`;
 const gamesCard = document.getElementById("num-games");
+gamesCard.innerHTML = `${GAMES_JSON.length}`
 
+//Funding Information
+const descriptionContainer = document.getElementById("description-container");
+let numUnderfundedGames = filterGamesByFunding("lesser");
+let numFundedGames = filterGamesByFunding("greater");
+displayFundingInfo();
 
-/*************************************************************************************
- * Challenge 5: Add functions to filter the funded and unfunded games
- * total number of contributions, amount donated, and number of games on the site.
- * Skills used: functions, filter
-*/
-
-// 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
-
+//Buttons
+const unfundedBtn = document.getElementById("unfunded-btn");
+const fundedBtn = document.getElementById("funded-btn");
+const allBtn = document.getElementById("all-btn");
+unfundedBtn.addEventListener("click", filterUnfundedOnly);
+fundedBtn.addEventListener("click", filterFundedOnly);
+allBtn.addEventListener("click", showAllGames); 
 
-    // use the function we previously created to add the unfunded games to the DOM
+function deleteChildElements(parent) { //clear gamesContainer to prepare for different group of game cards
+    while (parent.firstChild) {
+        parent.removeChild(parent.firstChild);
+    }
+}
 
+function addGamesToPage(games) { //add game cards to the page
+    for(let i = 0; i < games.length; i++)
+    {
+        let gameDiv = document.createElement("div");
+        gameDiv.setAttribute("class", "game-card");
+
+        gameDiv.innerHTML = `
+        <img src="${games[i].img}" class="game-img">
+        <h2>${games[i].name}</h2>
+        <p>Info: ${games[i].description}</p>
+        <p>Pledged: $${games[i].pledged.toLocaleString("en-US")}</p>
+        `;
+        gamesContainer.appendChild(gameDiv);
+    }
 }
 
-// show only games that are fully funded
-function filterFundedOnly() {
+function filterUnfundedOnly() { // show only games that have not reached their funding goal
     deleteChildElements(gamesContainer);
+    addGamesToPage(numUnderfundedGames);
+    console.log("Underfunded Games: ", numUnderfundedGames);
+    return numUnderfundedGames;
 
-    // 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
+    // let underfundedGames = GAMES_JSON.filter( (games) => { //implemented into one function filterGamesByFunding()
+    //     games.pledged < games.goal ? numUnderfundedGames++ : null;
+    //     return games.pledged < games.goal;
+    // });
 
 }
 
-// show all games
-function showAllGames() {
+function filterFundedOnly() { // show only games that have reached/surpassed their funding goal
     deleteChildElements(gamesContainer);
-
-    // add all games from the JSON data to the DOM
+    addGamesToPage(numFundedGames);
+    console.log("Funded Games: ", numFundedGames);
+    return numFundedGames;
+
+    // let fundedGames = GAMES_JSON.reduce((acc, games) => { //implemented into one function filterGamesByFunding()
+    //     if(games.pledged >= games.goal)
+    //     {
+    //         numFundedGames++;
+    //         acc.push(games);    
+    //     }
+    //     return acc;
+    // }, []);
 
 }
 
-// select each button in the "Our Games" section
-const unfundedBtn = document.getElementById("unfunded-btn");
-const fundedBtn = document.getElementById("funded-btn");
-const allBtn = document.getElementById("all-btn");
-
-// add event listeners with the correct functions to each button
-
-
-/*************************************************************************************
- * Challenge 6: Add more information at the top of the page about the company.
- * Skills used: template literals, ternary operator
-*/
-
-// grab the description container
-const descriptionContainer = document.getElementById("description-container");
-
-// use filter or reduce to count the number of unfunded games
-
-
-// create a string that explains the number of unfunded games using the ternary operator
+function showAllGames() { // show all games cards
+    deleteChildElements(gamesContainer);
 
+    addGamesToPage(GAMES_JSON);
+    console.log("All Games: ", GAMES_JSON);
+}
 
-// create a new DOM element containing the template string and append it to the description container
+function displayFundingInfo() { // display summary of funding information into two sentences
+    let gameStr = "game";
+    let remainStr = "remain";
 
-/************************************************************************************
- * Challenge 7: Select & display the top 2 games
- * Skills used: spread operator, destructuring, template literals, sort 
- */
+    if(numUnderfundedGames.length === 0) 
+    {
+        gameStr += "s";
+        remainStr += " unfunded. Thank you for helping fund these amazing games!";
+    }
+    else if(numUnderfundedGames.length === 1) remainStr += "s unfunded. We need your help to fund this amazing game!";
+    else
+    {
+        gameStr += "s";
+        remainStr += " unfunded. We need your help to fund these amazing games!";
+    }
+    let gameDisplayStr = document.createElement("p");
+    gameDisplayStr.innerHTML = `A total of ${raisedCard.innerHTML} has been raised for ${GAMES_JSON.length} games. Currently, ${numUnderfundedGames.length} ${gameStr} ${remainStr}`
+    descriptionContainer.appendChild(gameDisplayStr);
+    console.log("Funding Info: ", gameDisplayStr)
+
+    return gameDisplayStr;
+}
 
-const firstGameContainer = document.getElementById("first-game");
-const secondGameContainer = document.getElementById("second-game");
+const firstGameContainer = document.getElementById("first-game"); // Most funded game
+const secondGameContainer = document.getElementById("second-game"); // Second most funded game
 
-const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
+const sortedGames =  GAMES_JSON.sort( (item1, item2) => { // What to do with this?
     return item2.pledged - item1.pledged;
 });
 
-// use destructuring and the spread operator to grab the first and second games
+const [firstGame, secondGame, ...restOfGames] = GAMES_JSON; // Destructuring assignment to get the first two games from the sorted array
+const firstGameChild = document.createElement("h4");
+firstGameChild.innerHTML = firstGame.name;
+const secondGameChild = document.createElement("h4");
+secondGameChild.innerHTML = secondGame.name;
+
+firstGameContainer.appendChild(firstGameChild);
+secondGameContainer.appendChild(secondGameChild);
 
-// create a new element to hold the name of the top pledge game, then append it to the correct element
+/*PERSONAL ADDITION*/
 
-// do the same for the runner up item
+function filterGamesByFunding(filterParameter) // filter by funding implemented as one function to reduce code duplication
+{
+    let filteredGames = 0;
+
+    if(filterParameter === "greater") // filter for games that have reached their funding goal
+    {
+        filteredGames = GAMES_JSON.reduce((acc, games) => {
+            games.pledged - games.goal >= 0 ? acc.push(games) : 0;
+            return acc;
+        }, []);
+    }
+    else if(filterParameter === "lesser") // filter for games that have not reached their funding goal
+    {
+        filteredGames = GAMES_JSON.reduce((acc, games) => {
+            games.pledged - games.goal < 0 ? acc.push(games) : 0;
+            return acc;
+        }, []);
+    }
+    else{
+        console.log("Invalid filter parameter. Please use 'greater' or 'lesser'.");
+        showAllGames(); // if no filter is applied, show all games
+        return GAMES_JSON.length;
+    }
+    console.log("Filtered Array: ", filteredGames);
+    return filteredGames;
+}