diff --git a/README.md b/README.md index a12177342..7233a54ed 100644 --- a/README.md +++ b/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: -Video Walkthrough +Video Walkthrough 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] diff --git a/assets/GamesFunded Walkthrough.gif b/assets/GamesFunded Walkthrough.gif new file mode 100644 index 000000000..31a6ca33d Binary files /dev/null and b/assets/GamesFunded Walkthrough.gif differ diff --git a/index.html b/index.html index ba8123340..b4933bba9 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,38 @@ + GamesFunded + + + +

Sea Monster Crowdfunding

@@ -48,13 +76,14 @@

🥈 Runner Up

-

Our Games

+

Our Games

Check out each of our games below!

+
diff --git a/index.js b/index.js deleted file mode 100644 index 86fe7d438..000000000 --- a/index.js +++ /dev/null @@ -1,155 +0,0 @@ -/***************************************************************************** - * Challenge 2: Review the provided code. The provided code includes: - * -> Statements that import data from games.js - * -> A function that deletes all child elements from a parent element in the DOM -*/ - -// import the JSON data about the crowd funded games from the games.js file -import GAMES_DATA from './games.js'; - -// create a list of objects to store the data about the games using JSON.parse -const GAMES_JSON = JSON.parse(GAMES_DATA) - -// remove all child elements from a parent element in the DOM -function deleteChildElements(parent) { - while (parent.firstChild) { - parent.removeChild(parent.firstChild); - } -} - -/***************************************************************************** - * Challenge 3: Add data about each game as a card to the games-container - * Skills used: DOM manipulation, for loops, template literals, functions -*/ - -// grab the element with the id games-container -const gamesContainer = document.getElementById("games-container"); - -// create a function that adds all data from the games array to the page -function addGamesToPage(games) { - - // loop over each item in the data - - - // 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 - // between the end of the src attribute and the end of the tag ("/>") - - - // append the game to the games-container - -} - -// call the function we just defined using the correct variable -// later, we'll call this function using a different list of games - - -/************************************************************************************* - * Challenge 4: Create the summary statistics at the top of the page displaying the - * total number of contributions, amount donated, and number of games on the site. - * Skills used: arrow functions, reduce, template literals -*/ - -// grab the contributions card element -const contributionsCard = document.getElementById("num-contributions"); - -// use reduce() to count the number of total contributions by summing the backers - - -// set the inner HTML using a template literal and toLocaleString to get a number with commas - - -// grab the amount raised card, then use reduce() to find the total amount raised -const raisedCard = document.getElementById("total-raised"); - -// set inner HTML using template literal - - -// grab number of games card and set its inner HTML -const gamesCard = document.getElementById("num-games"); - - -/************************************************************************************* - * Challenge 5: Add functions to filter the funded and unfunded games - * total number of contributions, amount donated, and number of games on the site. - * Skills used: functions, filter -*/ - -// show only games that do not yet have enough funding -function filterUnfundedOnly() { - deleteChildElements(gamesContainer); - - // use filter() to get a list of games that have not yet met their goal - - - // use the function we previously created to add the unfunded games to the DOM - -} - -// show only games that are fully funded -function filterFundedOnly() { - deleteChildElements(gamesContainer); - - // use filter() to get a list of games that have met or exceeded their goal - - - // use the function we previously created to add unfunded games to the DOM - -} - -// show all games -function showAllGames() { - deleteChildElements(gamesContainer); - - // add all games from the JSON data to the DOM - -} - -// 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"); - -// add event listeners with the correct functions to each button - - -/************************************************************************************* - * Challenge 6: Add more information at the top of the page about the company. - * Skills used: template literals, ternary operator -*/ - -// grab the description container -const descriptionContainer = document.getElementById("description-container"); - -// use filter or reduce to count the number of unfunded games - - -// create a string that explains the number of unfunded games using the ternary operator - - -// create a new DOM element containing the template string and append it to the description container - -/************************************************************************************ - * Challenge 7: Select & display the top 2 games - * Skills used: spread operator, destructuring, template literals, sort - */ - -const firstGameContainer = document.getElementById("first-game"); -const secondGameContainer = document.getElementById("second-game"); - -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 - -// 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 \ No newline at end of file diff --git a/style.css b/style.css index 11303c2a7..615ed332a 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap'); - +html{ + scroll-behavior: smooth; +} body { font-family: 'Cabin'; background-color: #758190; @@ -21,6 +23,16 @@ body { .stats-container { display: flex; + align-items: flex-start; + + + +} +.stats-container:hover{ + cursor: pointer; + box-shadow: 0 0 30px lightblue; + + } .stats-card { @@ -72,4 +84,120 @@ button { padding: 1%; margin: 1%; border-radius: 7px; -} \ No newline at end of file +} +button:hover{ + cursor: pointer; + box-shadow: 0 0 30px lightblue; +} + + +/* Basic Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +nav.navbar { + background: #1e1e2f; + color: white; + padding: 0.75rem 1.5rem; + position: sticky; + top: 0; + z-index: 1000; +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: #00d4ff; + text-decoration: none; +} + +.nav-links { + list-style: none; + display: flex; + align-items: center; + gap: 1.5rem; +} + +.nav-links li a { + color: white; + text-decoration: none; + font-size: 1rem; + transition: color 0.3s; +} + +.nav-links li a:hover, +.nav-links li a.active { + color: #00d4ff; +} + +/* Search */ +.search-container { + display: flex; + gap: 0.25rem; +} + +.search-container input { + padding: 0.3rem 0.6rem; + border-radius: 4px; + border: none; +} + +.search-container button { + padding: 0.3rem 0.6rem; + border: none; + background: #00d4ff; + color: white; + cursor: pointer; + border-radius: 4px; +} + +.search-container button:hover { + background: #00aacc; +} + +/* Mobile Styles */ +.menu-toggle { + display: none; + font-size: 1.5rem; + background: none; + color: white; + border: none; + cursor: pointer; +} + +@media (max-width: 768px) { + .nav-links { + display: none; + flex-direction: column; + background: #1e1e2f; + position: absolute; + top: 60px; + right: 0; + width: 200px; + padding: 1rem; + } + + .nav-links.show { + display: flex; + } + + .menu-toggle { + display: block; + } +} + +.blurred { + filter: blur(4px); + opacity: 0.4; + transition: 0.3s; + cursor: pointer; +}