I have finished all required components

README.md

@@ -1,40 +1,38 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - Sea Monster Crowdfunding
 
-Submitted by: **Your Name Here**
+Submitted by: Christine Onianwa
 
-**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: 7 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] Nav bar that takes you to games section
+* [X] Search function that allows you to search for a game
 
 ## Video Walkthrough
 
 Here's a walkthrough of implemented features:
+<blockquote class="imgur-embed-pub" lang="en" data-id="a/uwzanjR"  ><a href="//imgur.com/a/uwzanjR">Sea Monster Crowdfunding</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
 
-<img src='http://i.imgur.com/link/to/your/gif/file.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
+<img src="assets\seaMonster.gif"/>
 
 <!-- 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 ...  [ScreenToGif](https://www.screentogif.com/) for Windows
 
 ## Notes
 
-Describe any challenges encountered while building the app.
+Form submission and the search function were the most difficult aspects of the app. It took a lot of research to find the correct syntax for taking text input from an input field in HTML and using it in JavaScript.
 
 ## License
 

index.html

@@ -12,7 +12,16 @@
         <img id="tentacles" src="assets/tentacles.png">
         <h1 class="header-text">Sea Monster Crowdfunding</h1>
     </div>
-
+    <!--Navigation bar-->
+    <nav id ="navbar">
+        <ul>
+            <li class = "nav-link"><a href ="#games-container"> Games </a></li>
+            <form id="frm1" action="#games-container">
+                <li><input type="text" placeholder="Search for a game!"></li>
+                <li><input type="button" id="search-btn" value="Enter"></li>
+            </form>
+        </ul>
+      </nav>
     <!-- background info about company -->
     <h2>Welcome to Sea Monster!</h2>
     <div id="description-container">

index.js

@@ -29,27 +29,32 @@ 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
-
-
-        // 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
+        let div1= document.createElement("div");
+         // add the class game-card to the list
+        div1.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 ("/>")
-
+        div1.innerHTML = `
+            <img src="${games[i].img}" width=50%/>
+            <p>The name of the game is ${games[i].name} and it has ${games[i].backers} backers</p>
+            <p>${games[i].description}</p>
+        `;
 
         // append the game to the games-container
+        gamesContainer.appendChild(div1);
+    }
+
+
 
 }
 
 // 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);
 
 /*************************************************************************************
  * Challenge 4: Create the summary statistics at the top of the page displaying the
@@ -61,20 +66,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);
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
-
-
+contributionsCard.innerHTML = `<p>${totalContributions.toLocaleString('en-US')} total contributers</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( (acc, game) => {
+    return acc + game.pledged;
+  }, 0);
 // set inner HTML using template literal
-
+raisedCard.innerHTML = `<p>$${totalraised.toLocaleString('en-US')} total pledged</p>`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
-
+const totalgames = GAMES_JSON.reduce( (acc, game) => {
+    return acc + 1;
+}, 0);
+gamesCard.innerHTML = `<p>${totalgames} total games </p>`;
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -87,9 +98,13 @@ function filterUnfundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have not yet met their goal
-
+    let unfundedList = GAMES_JSON.filter ( (game) => {
+        return game.pledged < game.goal;
+      });
+
 
     // use the function we previously created to add the unfunded games to the DOM
+    addGamesToPage(unfundedList);
 
 }
 
@@ -98,9 +113,12 @@ function filterFundedOnly() {
     deleteChildElements(gamesContainer);
 
     // use filter() to get a list of games that have met or exceeded their goal
-
+    let fundedList = GAMES_JSON.filter ( (game) => {
+        return game.pledged >= game.goal;
+      });
 
     // use the function we previously created to add unfunded games to the DOM
+    addGamesToPage(fundedList);
 
 }
 
@@ -109,6 +127,7 @@ function showAllGames() {
     deleteChildElements(gamesContainer);
 
     // add all games from the JSON data to the DOM
+    addGamesToPage(GAMES_JSON);
 
 }
 
@@ -118,6 +137,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 +151,23 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
+let unfundedList = GAMES_JSON.filter ( (game) => {
+    return game.pledged < game.goal;
+  });
 
+const unfundedgames = unfundedList.reduce( (acc, game) => {
+    return acc + 1;
+}, 0);
 
 // create a string that explains the number of unfunded games using the ternary operator
 
+let unfundedStr = `A total of $${totalraised.toLocaleString('en-US')} has been raised for ${totalgames} total games.
+  Currently ${unfundedgames} ${unfundedgames==1 ? "remains" : "remain"} 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
-
+let divStr= document.createElement("p");
+divStr.innerHTML = `<p>${unfundedStr}</p>`;
+descriptionContainer.appendChild(divStr);
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
@@ -148,8 +180,37 @@ const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
     return item2.pledged - item1.pledged;
 });
 
+
 // use destructuring and the spread operator to grab the first and second games
+let [firstPlayed, secondPlayed, ...others] = sortedGames;
 
 // create a new element to hold the name of the top pledge game, then append it to the correct element
+let divFirst= document.createElement("p");
+divFirst.innerHTML = `<p>${firstPlayed.name}</p>`;
+firstGameContainer.appendChild(divFirst);
+// do the same for the runner up item
+let divSecond= document.createElement("p");
+divSecond.innerHTML = `<p>${secondPlayed.name}</p>`;
+secondGameContainer.appendChild(divSecond);
+
+// create search function
+function searchFunction() {
+    // grab the text from the input
+    const searchInput = document.querySelector('input[type="text"]').value.trim();
+
+    deleteChildElements(gamesContainer);
+
+    // use filter() to get a list of games that include the search input-- make it not case sensitive by putting both to lower case
+    const searchList = GAMES_JSON.filter(game => {
+        return game.name.toLowerCase().includes(searchInput.toLowerCase());
+    });
+
+    // use the function we previously created to add filtered games to the DOM
+    addGamesToPage(searchList);
+}
+
+// select the submit button
+const submitBtn = document.getElementById("search-btn");
 
-// do the same for the runner up item
+// add event listener
+submitBtn.addEventListener("click", searchFunction);

style.css

@@ -21,6 +21,8 @@ body {
 
 .stats-container {
     display: flex;
+    cursor: pointer;
+    align-items: baseline;
 }
 
 .stats-card {
@@ -72,4 +74,53 @@ button {
     padding: 1%;
     margin: 1%;
     border-radius: 7px;
-}
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #a8b0bc;
+  }
+
+  li {
+    float: left;
+  }
+
+  .nav-link a {
+    display: block;
+    color: black;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-family: 'Cabin';
+  }
+
+  .nav-link a:hover {
+    background-color: #5b6f8d;
+    transition: 1s;
+  }
+
+  nav {
+    padding: 0;
+    width: 100%;
+  }
+
+  input[type=text] {
+    padding: 6px;
+    border: none;
+    margin-top: 8px;
+    margin-right: 16px;
+    font-size: 17px;
+    font-family: 'Cabin';
+  }
+
+  #search-btn{
+    padding: 6px;
+    border: none;
+    margin-top: 8px;
+    margin-right: 16px;
+    font-size: 17px;
+    font-family: 'Cabin';
+  }