Todo list for shop game - generated by AI

todo.md

HTML Structure

1. Create an index.html file and set up the basic HTML structure (head, body, etc.).
2. Create elements for:

• Header section (logo, search bar)
• Game list/gallery container
• Game item elements (image, title, price, etc.)
• Genre/category filter buttons container
• Footer section

HTML Structure - Game Item

1. Create a game item element that includes:

• Image container
• Title and subtitle elements
• Price element
• Tags/genres element

CSS Styling

1. Create a styles.css file and add styles for:

• Overall layout and design
• Header section styling
• Game list/gallery styling
• Game item styling (image, title, price, etc.)
• Genre/category filter button styling
• Footer section styling

JavaScript

1. Create a script.js file and add functionality for:

• Fetching data from the Steam API
• Displaying game list/gallery
• Handling search input and displaying search results
• Filtering games by genre/category
• Displaying game item details on click

API Integration

1. Read through the Steam API documentation and understand how to make API requests.
2. Implement API requests in script.js to fetch game data.

User Stories

1. Implement the following user stories:

• User can see a list of games from the API in a gallery format.
• User can see the game initial info (image, title, and price...) in each item.
• User can see a Search input box.
• User is able to Search for games by app name.
• User is able to see the search results.
• User can see a list of all genres (category).
• User is able to filter games that match the genre and tag buttons that clicked.
• User sees the website with a clean UI design.
• User can view the website in an iPhone X screen size.

** Bonus**

1. Implement one of the two methods to display game item details on click:

• Redirect to a new HTML page and replace the HTML element of the current page.
• Create a new HTML element to replace the current display of the page.