Submitted by: Anaum Khan
Estimated time spent: 15 hours spent in total
Deployed Application: https://anaumkhan.github.io/Anaum_Flixter/
- User can view a list of current movies from The Movie Database API as a grid view
- The grid element should have an id of
movies-grid - Each movie wrapper element should have a class of
movie-card
- The grid element should have an id of
- For each movie displayed, user can see the following details:
- Title - the element should have a class of
movie-title - Image - the
imgelement should have a class ofmovie-poster - Votes - the element should have a class of
movie-votes
- Title - the element should have a class of
- User can load more current movies by clicking a button at the bottom of the list
- The button should have an id of
load-more-movies-btn. - When clicked, the page should not refresh.
- New movies should simply be added to the bottom
- The button should have an id of
- Allow users to search for movies and display them in a grid view
- There should be a search input element with an id of
search-input - Users should be able to type into the input
- When a user hits 'Enter', it should send a search request to the movies API
- The results from the search should be displayed on the page
- There should be a close icon with an id of
close-search-btnthat exits the search, clears results, and shows the current movies displayed previously
- There should be a search input element with an id of
- Website accounts for basic HTML/CSS accessibility features
- Website should be responsive
- Deploy website using GitHub Pages.
- Allow user to view more details about a movie within a popup.
- Improve the user experience through CSS & animation.
- Allow movie video trailers to be played using embedded YouTube
- Implement anything else that you can get done to improve the app functionality!
Shout out to Phineas and Yilika!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent