Note: add padding to icon.

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-package-lock.json
+package-lock.json
+secretkeys.txt

README.md

@@ -1,44 +1,45 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *SMC GAMES FUNDING*
 
-Submitted by: **Your Name Here**
+Submitted by: **Mohammed Nazib Hossain Khan**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**SMC GAMES 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: **8** 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] Added a Smooth Scroll Effect when clicking Our Games Button on the Navigation Bar!
+* [X] Revamped the webpage into a darker theme.
 
 ## 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\OctaFund.gif' 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. -->
+GIF created with https://www.screentogif.com/ and https://imgur.com 
 
 ## Notes
 
-Describe any challenges encountered while building the app.
+Building this app has been a rewarding yet challenging experience. One significant challenge I encountered was ensuring the responsiveness of the design across various devices. Adapting the layout and styles to different screen sizes required a deep dive into media queries and CSS adjustments. This was particularly challenging as I aimed to provide a seamless user experience on both desktop and mobile devices. However, with perseverance and learning about modern responsive design practices, I successfully overcame this hurdle.
+
+Another noteworthy challenge was returning to web development after an extended hiatus. The technology landscape evolves rapidly, and catching up with the latest tools, libraries, and best practices presented a substantial learning curve. Embracing newer concepts like ES6, module systems, and responsive design frameworks demanded a considerable effort. Despite the initial challenges, the process of reacquainting myself with web development turned out to be an enriching journey, showcasing the dynamic nature of the field.
+
+In summary, the challenges, particularly in achieving responsive design and re-entering the web development space, provided valuable learning opportunities and a sense of accomplishment as the project took shape.
 
 ## License
 
-    Copyright [yyyy] [name of copyright owner]
+    Copyright [2023] [Mohammed Nazib Hossain Khan]
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

index.html

@@ -7,19 +7,21 @@
   </head>
 
   <body>
-    <!-- header row with logo -->
     <div class="header">
+        <div class="icon">
         <img id="tentacles" src="assets/tentacles.png">
-        <h1 class="header-text">Sea Monster Crowdfunding</h1>
+        </div>
+        <h1 class="header-text1">Octa</h1> <h1 class="header-text2">Fund</h1>
+        <nav>
+            <a href="#our-games">Our Games</a>
+        </nav>
     </div>
 
-    <!-- background info about company -->
-    <h2>Welcome to Sea Monster!</h2>
+    <h2>Welcome to OctaFund!</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">
         <div class="stats-card">
@@ -47,8 +49,9 @@ <h3>🥈 Runner Up</h3>
         </div>
     </div>
 
-    <!-- list of games funded by Sea Monster -->
+    <section id = "our-games">
     <h2>Our Games</h2>
+    </section>
     <p>Check out each of our games below!</p>
     <div id="button-container">
         <button id="unfunded-btn">Show Unfunded Only</button>
@@ -61,4 +64,4 @@ <h2>Our Games</h2>
 
     <script type="module" src="index.js"></script>
   </body>
-</html>
+</html>

index.js

@@ -29,27 +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 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 ("/>")
-
+        gameCard.innerHTML = `
+        <img src = "${games[i].img}" alt = "${games[i]}.name" class = "game-img">
+        <h3>${games[i].name}</h3>
+        <p>${games[i].description}</p>
+        <p>Pledged: $${games[i].pledged.toLocaleString()}</p>
+        <p>Goal: $${games[i].goal.toLocaleString()}</p>
+        <p>Backers: ${games[i].backers}</p>
+        `;
 
         // append the game to the games-container
-
+        gamesContainer.appendChild(gameCard);
+    }   
 }
-
 // 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 +68,33 @@ 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((total,cbts) => {
+    return total+cbts.backers
+},0) 
 
 // set the inner HTML using a template literal and toLocaleString to get a number with commas
 
+contributionsCard.innerHTML = `<h3>Total Contributors: ${totalContributions.toLocaleString()}</h3>`;
 
 // grab the amount raised card, then use reduce() to find the total amount raised
-const raisedCard = document.getElementById("total-raised");
+const raisedCard = document.getElementById("total-raised"); 
+
+const totalRaised = GAMES_JSON.reduce((total, raised) => {
+    return total+raised.pledged
+},0)
 
 // set inner HTML using template literal
 
+raisedCard.innerHTML = `<h3>Total Raised: $${totalRaised.toLocaleString()} </h3>`;
 
 // grab number of games card and set its inner HTML
 const gamesCard = document.getElementById("num-games");
 
+const totalGames = GAMES_JSON.reduce((total) => {
+    return total + 1
+},0)
+
+gamesCard.innerHTML = `<h3>Total Number of Games: ${totalGames.toLocaleString()}</h3>`
 
 /*************************************************************************************
  * Challenge 5: Add functions to filter the funded and unfunded games
@@ -88,9 +108,10 @@ function filterUnfundedOnly() {
 
     // use filter() to get a list of games that have not yet met their goal
 
+const checkUnderFunded = GAMES_JSON.filter(game => game.pledged < game.goal);
 
     // use the function we previously created to add the unfunded games to the DOM
-
+addGamesToPage(checkUnderFunded);
 }
 
 // show only games that are fully funded
@@ -99,27 +120,29 @@ function filterFundedOnly() {
 
     // use filter() to get a list of games that have met or exceeded their goal
 
-
+    const checkFunded = GAMES_JSON.filter(game => game.pledged > game.goal);
     // use the function we previously created to add unfunded games to the DOM
-
+    addGamesToPage(checkFunded);
 }
 
 // show all games
 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");
+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
 
-
+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,13 +152,22 @@ const allBtn = document.getElementById("all-btn");
 const descriptionContainer = document.getElementById("description-container");
 
 // use filter or reduce to count the number of unfunded games
-
+const unfundedGamesCount = GAMES_JSON.filter(game => game.pledged < game.goal).length;
 
 // create a string that explains the number of unfunded games using the ternary operator
 
+const raisedStatement = (unfundedGamesCount === 0)
+  ? `A total of $${totalRaised.toLocaleString()} has been raised for ${GAMES_JSON.length} games. Currently, all games have been fully funded!`
+  : `A total of $${totalRaised.toLocaleString()} has been raised for ${GAMES_JSON.length} games. Currently, 
+  ${unfundedGamesCount} game remains 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
 
+const descriptionParagraph = document.createElement("p");
+descriptionParagraph.textContent = raisedStatement;
+descriptionContainer.appendChild(descriptionParagraph);
+
+
 /************************************************************************************
  * Challenge 7: Select & display the top 2 games
  * Skills used: spread operator, destructuring, template literals, sort 
@@ -147,9 +179,28 @@ const secondGameContainer = document.getElementById("second-game");
 const sortedGames =  GAMES_JSON.sort( (item1, item2) => {
     return item2.pledged - item1.pledged;
 });
+console.log(sortedGames);
 
 // use destructuring and the spread operator to grab the first and second games
-
-// 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 [firstGame, secondGame] = sortedGames;
+
+// Creating elements to display the top 2 games
+const firstGameElement = document.createElement("div");
+firstGameElement.innerHTML = `
+    <img src="${firstGame.img}" alt="${firstGame.name}" class="game-img">
+    <h3>${firstGame.name}</h3>
+    <p>Pledged: $${firstGame.pledged.toLocaleString()}</p>
+    <p>Goal: $${firstGame.goal.toLocaleString()}</p>
+`;
+
+const secondGameElement = document.createElement("div");
+secondGameElement.innerHTML = `
+    <img src="${secondGame.img}" alt="${secondGame.name}" class="game-img">
+    <h3>${secondGame.name}</h3>
+    <p>Pledged: $${secondGame.pledged.toLocaleString()}</p>
+    <p>Goal: $${secondGame.goal.toLocaleString()}</p>
+`;
+
+// Appending the elements to the corresponding containers
+firstGameContainer.appendChild(firstGameElement);
+secondGameContainer.appendChild(secondGameElement);