codepath · GreciaOsorio · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 29, 2025
diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Sea Monster Crowdfunding*
 
-Submitted by: **Your Name Here**
+Submitted by: **Grecia Osorio**
 
-**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: **11** 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:
 
@@ -34,11 +34,11 @@ GIF created with ...
 
 ## Notes
 
-Describe any challenges encountered while building the app.
+This was a fun and challenging pre-work. I had taken a course for Web Development during college, I found it challenging and fast-paced. Unlike that course, this snipped of work walk me through my tasks in a fun and thoughful way, I retained everything in the challenges. However, one of the biggest setbacks for me was the refreshment of information I needed. I had not use React in many years and forgotten a lot of what you need, that goes for JavaScript as well. Out of everything my biggest struggle was remembering how to properly traverse through data and adding it to the DOM. Once I overcame that obstacle, everything else was a lot of fun!
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2025] [Grecia Osorio]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width">
+    <!-- added fonts using awesome fonts -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link href="style.css" rel="stylesheet" type="text/css" />
   </head>
 
@@ -13,15 +15,27 @@
         <h1 class="header-text">Sea Monster Crowdfunding</h1>
     </div>
 
+    <!-- navbar right under the logo -->
+    <div class="topnav">
+        <a href="#about-us" id="nav-about-us">About Us</a>
+        <a href="#stats" id="nav-stats">Stats</a>
+        <a href="#games" id="nav-our-games">Our Games</a>
+        <div class="search-container">
+            <input type="text" placeholder="Search our games" name="search" id="search">
+            <button id= "search-btn" type="submit"><i class="fa fa-search fa-regular"></i></button>
+        </div>
+
+    </div>
+
     <!-- background info about company -->
-    <h2>Welcome to Sea Monster!</h2>
+    <h2 id="about-us">Welcome to Sea Monster!</h2>
     <div id="description-container">
         <p>The purpose of our company is to fund independent games. We've been in operation for 12 years.</p>
     </div>
 
     <!-- top games & other interesting stats -->
-    <h2>Stats</h2>
-    <div class="stats-container">
+    <h2 id="stats">Stats</h2>
+    <div class="stats-container" >
         <div class="stats-card">
             <h3>Individual Contributions</h3>
             <p id="num-contributions">
@@ -48,7 +62,7 @@ <h3>🥈 Runner Up</h3>
     </div>
 
     <!-- list of games funded by Sea Monster -->
-    <h2>Our Games</h2>
+    <h2 id="games">Our Games</h2>
     <p>Check out each of our games below!</p>
     <div id="button-container">
         <button id="unfunded-btn">Show Unfunded Only</button>

diff --git a/index.js b/index.js
@@ -10,6 +10,7 @@ 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) {
@@ -27,27 +28,40 @@ const gamesContainer = document.getElementById("games-container");
 
 // create a function that adds all data from the games array to the page
 function addGamesToPage(games) {
-
     // loop over each item in the data
-
-
+    //forEach goes over each value in the list of ojbects games
+    // game = one value in games
+    games.forEach(game => {
         // create a new div element, which will become the game card
-
-
+        // document.createElement - creates a new element in the document
+        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 ("/>")
-
-
+        //call upon each key in the game value (game.key) to get their value
+        //back ticks so it reads the ${}
+        gameCard.innerHTML = `
+            <img src= ${game.img} alt="Game Image" class = "game-img">
+            <div>
+                <h4><b>Name: ${game.name}</b></h4>
+                <p>Description: ${game.description}</p>
+                <p>Pledged: ${game.pledged}</p>
+                <p>Goal: ${game.goal}</p>
+                <p>Backers: ${game.backers}</p>
+            </div>
+        `;
         // append the game to the games-container
+        //this element is grabbed outside the function
+        gamesContainer.appendChild(gameCard)
 
+    })
+    // 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 ("/>")
 }
 
 // call the function we just defined using the correct variable
+addGamesToPage(GAMES_JSON)
 // later, we'll call this function using a different list of games
 
 
@@ -61,19 +75,40 @@ function addGamesToPage(games) {
 const contributionsCard = document.getElementById("num-contributions");
 
 // use reduce() to count the number of total contributions by summing the backers
-
+//call reduce on GAMES_JSON object
+//acc = accumulator (fancy word for the total added)
+//game = the object from GAMES_JSON (one at a time ladies)
+//using dot notation to get the backers for each game and add them all
+const contributions = GAMES_JSON.reduce((acc, game) => {
+    return acc + game.backers;
+}, 0)
+//check you get an accurate number, should be:19187 (counted them myself)
+console.log(contributions)
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+const contribFormatted = contributions.toLocaleString('en-US')
+contributionsCard.innerHTML = `${contribFormatted}`
 
 // grab the amount raised card, then use reduce() to find the total amount raised
 const raisedCard = document.getElementById("total-raised");
-
+const raised = GAMES_JSON.reduce((acc, game) => {
+    return acc + game.pledged;
+}, 0)
+console.log(raised)
 // set inner HTML using template literal
-
+const raisedFormatted = raised.toLocaleString('en-US')
+raisedCard.innerHTML = `$${raisedFormatted}`
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
+const games = GAMES_JSON.reduce((acc, game) => {
+    return acc + 1
+}, 0)
+console.log(games)
+
+const gamesFormatted = games.toLocaleString('en-US')
+gamesCard.innerHTML = `${gamesFormatted}`
+
 
 
 /*************************************************************************************
@@ -87,28 +122,28 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
-
+    const underFunded = GAMES_JSON.filter((game) => game.pledged < game.goal)
     // use the function we previously created to add the unfunded games to the DOM
-
+    addGamesToPage(underFunded)
 }
 
 // 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 funded = GAMES_JSON.filter((game) => game.pledged >= game.goal)
 
     // 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)
 
 }
 
@@ -118,6 +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)
 
 
 /*************************************************************************************
@@ -129,13 +167,18 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
-
-
+const numUnderFunded = GAMES_JSON.filter((game) => game.pledged < game.goal).length
+console.log(numUnderFunded)
 // create a string that explains the number of unfunded games using the ternary operator
-
+const message = `A total of $${raisedFormatted} has been raised for ${gamesFormatted} games. Currently, 
+${numUnderFunded != 0 ? 
+    numUnderFunded + " games remain unfunded. We need your help to fund these amazing games!" 
+    : " all games are funded!"}`
 
 // create a new DOM element containing the template string and append it to the description container
-
+const gameMsg = document.createElement('p')
+gameMsg.innerHTML = message
+descriptionContainer.appendChild(gameMsg)
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
@@ -149,7 +192,99 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
-
+let [game1, game2] = sortedGames
+console.log([game1, game2])
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+const mostFunded = game1.name
+console.log(mostFunded)
+const mFGame = document.createElement('p')
+mFGame.innerHTML = mostFunded
+firstGameContainer.appendChild(mFGame)
+// do the same for the runner up item
+const mostFunded2 = game2.name
+console.log(mostFunded2)
+const mFGame2 = document.createElement('p')
+mFGame2.innerHTML = mostFunded2
+secondGameContainer.appendChild(mFGame2)
+
+/************************************************************************************
+ * Bonus: Add ons & UX/UI modified
+ */
+const searchInput = document.getElementById("search");
+const searchBtn = document.getElementById("search-btn");
+
+function scrollToGamesSection() {
+    const gamesSection = document.getElementById('games');
+    gamesSection.scrollIntoView({ behavior: 'smooth' });
+}
+
+function getMatchingGames(searchInput){
+    const gameCards = document.querySelectorAll('.game-card');
+    let matched = false;
+
+    gameCards.forEach(game => {
+        const gameNameEl = game.querySelector('h4');
+
+        if(gameNameEl){
+            const gameName = gameNameEl.textContent.toLowerCase();
+
+            if (gameName.includes(searchInput.toLowerCase())){
+                matched = true;
+                game.classList.add('search-highlight');
+
+                setTimeout(()=>{
+                    game.classList.add('fade-out');
+                    setTimeout(()=>{
+                        game.classList.remove('search-highlight', 'fade-out');
+                    }, 300)
+                }, 3000)
+            }
+        }
+
+    });
+    return matched;
+}
 
-// do the same for the runner up item
+function noResults(searchVal){
+    alert(`We are sorry, we could not find "${searchVal}" among our game library. Make sure to be in the all games filter when searching.`)
+}
+
+function executeSearch(){
+    const searchVal = searchInput.value.trim();
+
+    if(!searchVal){
+        alert('Nothing has been search for.');
+        return;
+    }
+
+    let foundInGames = false;
+    GAMES_JSON.forEach(game => {
+        if(game.name.toLowerCase().includes(searchVal.toLowerCase())){
+            foundInGames = true;
+        }
+    });
+
+    if (foundInGames){
+        scrollToGamesSection();
+        setTimeout(()=> {
+            const matched = getMatchingGames(searchVal);
+            if(!matched){
+                noResults(searchVal);
+            }
+        }, 500);
+    } else {
+        noResults(searchVal);
+    }
+    searchInput.value = '';
+}
+
+searchInput.addEventListener("keypress", (e) => {
+    if (e.key === "Enter"){
+        executeSearch()
+    }
+});
+
+searchBtn.addEventListener("click", (e)=>{
+    e.preventDefault();
+    executeSearch();
+});