First Commit

README.md

@@ -1,44 +1,41 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Sea Monster Funding
 
-Submitted by: **Your Name Here**
+Submitted by: Luis Lema
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+Sea Monster 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: 4.5 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.
+- [✔] 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.
 
 The following **optional** features are implemented:
 
-* [ ] List anything else that you can get done to improve the app functionality!
+- [✔] Search bar for the many games
+- [✔] Nav bar at the top of the page to get to the Our Game section quickly
+- [✔] Updated CSS to make the site more visually 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' />
+![Desktop 2024 08 23 - 20 04 14 02](https://github.com/user-attachments/assets/9822cd3e-c643-4e0c-a4c2-84a826f8bc8e)
 
-<!-- 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. -->
+GIF created with imgur.com
 
 ## Notes
 
-Describe any challenges encountered while building the app.
+Learning new ways to implement features and create a website was a fun experience for me, as it grew my knowledge further in HTML, CSS, and JavaScript. Having to learn the many Git commands, methods, and styles, I applied these skills to my project, which resulted in a website I am most proud of. There were challenges throughout this work that made me stop and think about solutions, such as the implementation of the search bar, and I had to use outside information to help me. However, in the end, it was all worth it as it resulted in a fun activity that refined my skills. I hope to continue this course and get better at software development.
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright 2024 Luis Lema
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.html

@@ -10,17 +10,21 @@
     <!-- header row with logo -->
     <div class="header">
         <img id="tentacles" src="assets/tentacles.png">
-        <h1 class="header-text">Sea Monster Crowdfunding</h1>
+        <h1 class="header-text">---🦈🐙Sea Monster Crowdfunding🐙🦈---</h1>
+        <img id="tentacles" src="assets/tentacles.png">
     </div>
 
     <!-- background info about company -->
     <h2>Welcome to Sea Monster!</h2>
-    <div id="description-container">
+    <div id="description-container" display="flex">
         <p>The purpose of our company is to fund independent games. We've been in operation for 12 years.</p>
     </div>
 
+    <!-- button to get to games faster-->
+    <button id="down-button" onClick="document.getElementById('bottom-section').scrollIntoView()">Go To Games</button>
+
     <!-- top games & other interesting stats -->
-    <h2>Stats</h2>
+    <h1 align-item="center">Stats</h1>
     <div class="stats-container">
         <div class="stats-card">
             <h3>Individual Contributions</h3>
@@ -48,8 +52,10 @@ <h3>🥈 Runner Up</h3>
     </div>
 
     <!-- list of games funded by Sea Monster -->
-    <h2>Our Games</h2>
-    <p>Check out each of our games below!</p>
+    <h1 id="bottom-section">Our Games</h1>
+    <h2>Check out each of our games below!</h2>
+        <input type="search" placeholder="Search Game" id="game-input"  class="search-bar">
+        </input>
     <div id="button-container">
         <button id="unfunded-btn">Show Unfunded Only</button>
         <button id="funded-btn">Show Funded Only</button>

index.js

@@ -29,25 +29,34 @@ 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
+        const gameInfo = document.createElement("div");
+        gameInfo.classList.add("game-card");
+        gameInfo.innerHTML = `  
+                                <img src=${games[i].img} class="game-img"></img> 
+                                <h1>${games[i].name}</h1>
+                                <h2>Description: ${games[i].description}</h2>
+                                <h3>Goal: $${games[i].goal.toLocaleString('en-US')}</h3>`
 
 
-        // add the class game-card to the list
-
+        gamesContainer.appendChild(gameInfo);
 
+// 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
+addGamesToPage(GAMES_JSON)
+
 // later, we'll call this function using a different list of games
 
 
@@ -61,20 +70,36 @@ 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((accumilator, games) => {
+    return accumilator + games.backers;
+}, 0)
+console.log(totalContributions)
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
+contributionsCard.innerHTML= `<p>${totalContributions.toLocaleString('en-US')}</p>`
 
 
 // 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((accumilator, games) => {
+    return accumilator + games.pledged;
+}, 0)
+console.log(totalRaised)
+
 // set inner HTML using template literal
+raisedCard.innerHTML = `<p>$${totalRaised.toLocaleString('en-US')}</p>`
 
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
 
+const totalGames= GAMES_JSON.reduce((accumilator) => {
+    return accumilator + 1
+}, 0)
+console.log(totalGames)
+
+gamesCard.innerHTML= `<p>${totalGames}</p>`
+
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -87,20 +112,24 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
-
+    const unfundedGames = GAMES_JSON.filter((games) => {
+        return games.pledged < games.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((games) => {
+        return games.pledged >= games.goal
+    })
     // use the function we previously created to add unfunded games to the DOM
+    addGamesToPage(fundedGames);
 
 }
 
@@ -109,17 +138,21 @@ 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
 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
 
 
+// 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.
  * Skills used: template literals, ternary operator
@@ -129,12 +162,21 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
-
+const numOfUnfundedGames = GAMES_JSON.reduce((accumilator, games) => {
+    if (games.pledged < games.goal){
+        return accumilator + 1
+    }
+    return accumilator + 0
+}, 0)
 
 // create a string that explains the number of unfunded games using the ternary operator
-
+const descriptionString = `<p>A total of $${totalRaised.toLocaleString("en-US")} has been raised for ${totalGames}. ${numOfUnfundedGames != 0 ? `Currently ${numOfUnfundedGames} games remain unfunded. We need your help funding these amazing games!` : `all games have been funded :D`}`
 
 // create a new DOM element containing the template string and append it to the description container
+const newDOMDescription= document.createElement("div")
+    newDOMDescription.innerHTML = descriptionString
+
+    descriptionContainer.appendChild(newDOMDescription)
 
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
@@ -149,7 +191,40 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
 });
 
 // use destructuring and the spread operator to grab the first and second games
+let [firstBest, secondBest, ...remainingGames] = 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 bestFirstGame = document.createElement("div")
+    bestFirstGame.innerHTML= `<img src=${firstBest.img} class="game-img"></img>
+                          <p>${firstBest.name}</p>
+                          <p>${firstBest.description}</p>
+                          <p>Pledged: ${firstBest.pledged.toLocaleString('en-US')}</p>
+                          <p>Goal: $${firstBest.goal.toLocaleString('en-US')}</p>
+                          <p>Backers: ${firstBest.backers.toLocaleString('en-US')}</p>`
+    firstGameContainer.appendChild(bestFirstGame)
+
+// do the same for the runner up item
+const bestSecondGame = document.createElement("div")
+    bestSecondGame.innerHTML= `<img src=${secondBest.img} class="game-img"></img>
+                               <p>${secondBest.name}</p>
+                               <p>${secondBest.description}</p>
+                               <p>Pledged: ${secondBest.pledged.toLocaleString('en-US')}</p>
+                               <p>Goal: $${secondBest.goal.toLocaleString('en-US')}</p>
+                               <p>Backers: ${secondBest.backers.toLocaleString('en-US')}</p>`
+    secondGameContainer.appendChild(bestSecondGame)
+
+
+
+//Search-bar code
+
+const searchInput = document.getElementById("game-input");
+searchInput.addEventListener('change', (e) =>{
+        if (e.target.value.length > 1) {
+            deleteChildElements(gamesContainer)
+            addGamesToPage(GAMES_JSON.filter((games) => {return games.name.toLowerCase().startsWith(e.target.value.toLowerCase())}))
+        }
+        else {
+            deleteChildElements(gamesContainer)
+            addGamesToPage(GAMES_JSON)
+        }
+})

style.css

@@ -2,7 +2,7 @@
 
 body {
     font-family: 'Cabin';
-    background-color: #758190;
+    background-color: #223853;
 }
 
 #tentacles {
@@ -11,20 +11,57 @@ body {
 
 .header {
     display: flex;
-    background-color: lightblue;
+    background-color: rgb(87, 168, 196);
     padding: 1%;
     align-items: center;
     margin-left: -10px;
     margin-right: -10px;
     margin-top: -10px;
 }
 
+.header-text, #tentacles{
+    margin-left: 280px;
+    background-color:#2b314d;
+    color: rgb(255, 255, 255);
+    border-radius: 50%;
+    border-style:dashed;
+}
+
+.search-bar {
+    width: 100%;
+    max-width: 700px;
+    background: rgba(255,255,255,0.2);
+    display:flex;
+    align-items: center;
+    border-radius: 60px;
+    padding: 10px 20px;
+}
+
+.search-bar input {
+    background: transparent;
+    flex: 1;
+    border: 0;
+    outline: none;
+    padding: 10px 6px;
+    font-size: 20px;
+}
+
 .stats-container {
     display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+#first-game:hover{
+    box-shadow: 0 0 30px lightblue;
+}
+
+#second-game:hover{
+    box-shadow: 0 0 30px lightblue;
 }
 
 .stats-card {
-    background-color: #a8b0bc;
+    background-color: #7988bb;
     border-radius: 7px;
     padding: 1%;
     margin: 1%;
@@ -49,7 +86,7 @@ body {
 }
 
 .game-card {
-    background-color: #FFFFFF;
+    background-color:#2b314d;
     padding: 1%;
     margin: 1%;
     width: 300px;
@@ -72,4 +109,10 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
-}
+    background-color:#2b314d;
+    color: lightblue
+}
+
+button:hover {
+    cursor: pointer;
+}