CodePathPreWork Challenges Solved

README.md

@@ -1,29 +1,33 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *GamesFunded*
 
-Submitted by: **Your Name Here**
+Submitted by: **Muhammad Asad**
 
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**GamesFunded** 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: **20** 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] List anything else that you can get done to improve the app functionality! 
+* [x]Navigation Bar: A clean navigation bar is placed at the top of the website.
+* [x]Includes an “Our Games” link that smoothly scrolls/takes users directly to the Our Games section.
+* [x] Search Functionality: A search bar is integrated within the navigation bar. Users can search for specific games from the funded collection.
+* [x]On search, the website blurs all other games and highlights/displays only the game that matches the query.
 
 ## 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/GamesFunded Walkthrough.gif' title='Video Walkthrough' width='' alt='Video Walkthrough' />
 
 <!-- Replace this with whatever GIF tool you used! -->
 GIF created with ...  
@@ -33,9 +37,35 @@ GIF created with ...
 [peek](https://github.com/phw/peek) for Linux. -->
 
 ## Notes
+Learned how to parse JSON data and dynamically create game cards from it.
 
-Describe any challenges encountered while building the app.
+Implemented a navigation bar with:
 
+“Our Games” link → scrolls directly to the game section.
+
+A Search Bar → highlights only the searched game and blurs others for better focus.
+
+Added filter buttons (Funded / Unfunded / Show All Games) to easily categorize projects.
+
+Faced a challenge when trying to add a page-click reset feature (to reset the blurred games). It conflicted with the filter buttons, so I removed it for smoother functionality.
+
+Practiced DOM manipulation (adding/removing child elements, handling events, updating UI dynamically).
+
+Learned how to use Git & GitHub for version control — committing changes, pushing to remote, and handling mistakes like accidentally adding a nested repository.
+
+Improved problem-solving skills by debugging issues with event listeners and button conflicts.
+
+Realized the importance of user experience (UX) — sometimes fewer features make the website more intuitive.
+
+
+## Describe any challenges encountered while building the app.
+While implementing the blur effect feature (showing only the searched game while blurring others), I also experimented with an additional feature:
+
+When the user clicks anywhere on the page, the game list should reset and display all games again.
+
+However, this feature conflicted with the Funded / Unfunded / Show All Games buttons — only one button would work at a time.
+
+To avoid this conflict and ensure smooth functionality, I decided to remove the page-click reset feature and kept the original button functionality intact.
 ## License
 
     Copyright [yyyy] [name of copyright owner]

index.html

@@ -4,10 +4,38 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width">
     <link href="style.css" rel="stylesheet" type="text/css" />
+    <title>GamesFunded</title>
   </head>
 
   <body>
     <!-- header row with logo -->
+    <!-- Navigation Bar -->
+<nav class="navbar">
+  <div class="nav-container">
+    <!-- Logo -->
+    <a href="#home" class="logo">Sea Monster</a>
+
+    <!-- Nav Links -->
+    <ul class="nav-links" id="nav-links">
+      <li><a href="#our-games" class="active">Our Games</a></li>
+
+      <li><a href="#about">About</a></li>
+      <li><a href="#contact">Contact</a></li>
+
+      <li>
+        <form class="search-container">
+          <input type="text" id="search-bar" placeholder="Search.." name="search">
+          <button type="button" id="search-btn">🔍</button>
+        </form>
+      </li>
+    </ul>
+
+    <!-- Mobile Menu Button -->
+    <button class="menu-toggle" id="menu-toggle">☰</button>
+  </div>
+</nav>
+
+
     <div class="header">
         <img id="tentacles" src="assets/tentacles.png">
         <h1 class="header-text">Sea Monster Crowdfunding</h1>
@@ -48,13 +76,14 @@ <h3>🥈 Runner Up</h3>
     </div>
 
     <!-- list of games funded by Sea Monster -->
-    <h2>Our Games</h2>
+    <h2 id="our-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>
         <button id="funded-btn">Show Funded Only</button>
         <button id="all-btn">Show All Games</button>
     </div>
+    <div id="search-result"></div>
     <div id="games-container">
 
     </div>