From 11e2ba655f589ca7f4c725dbb714a3695470680d Mon Sep 17 00:00:00 2001 From: malik2322 <143920816+malik2322@users.noreply.github.com> Date: Mon, 18 Aug 2025 15:27:26 -0500 Subject: [PATCH 1/2] Update README.md --- README.md | 51 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 45 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index a12177342..f901502cf 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# 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 @@ -17,7 +17,19 @@ The following **required** functionality is completed: The following **optional** features are implemented: -* [ ] List anything else that you can get done to improve the app functionality! +* [ ] 🧭 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 From 8befb21bb7bf30a55fbc394280c5f8bc032e56ba Mon Sep 17 00:00:00 2001 From: malik2322 <143920816+malik2322@users.noreply.github.com> Date: Mon, 18 Aug 2025 15:30:25 -0500 Subject: [PATCH 2/2] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f901502cf..26cbbe54e 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,14 @@ Time spent: **20** hours spent in total 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: -* [ ] 🧭 Navigation Bar +* [x] 🧭 Navigation Bar -> A clean navigation bar is placed at the top of the website.