Update README.md

README.md

@@ -1,23 +1,35 @@
-# 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] 🧭 Navigation Bar
+
+-> A clean navigation bar is placed at the top of the website.
+
+-> Includes an “Our Games” link that smoothly scrolls/takes users directly to the Our Games section.
+
+🔎 Search Functionality
+
+-> A search bar is integrated within the navigation bar.
+
+-> Users can search for specific games from the funded collection.
+
+-> On search, the website blurs all other game sections and highlights/displays only the game that matches the query.
 
 ## Video Walkthrough
 
@@ -33,8 +45,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.
+
+-> 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.
 
-Describe any challenges encountered while building the app.
+-> 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