Submitted by: Salamata Bah
Estimated time spent: 10 hours spent in total
Deployed Application (optional): Flixster Deployed Site
- 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. https://salamata4255.github.io/flixster_starter/
- 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!
Screen.Recording.2022-06-17.at.4.26.16.PM.mov
- Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?
Yes, the labs were very helpful in preparing for the project. Learning about fetching data from an api and modifying the api URL for different queries, manipulating HTML string with innerHTML and getting HTML using the query selector were in fact helpful for this project. I do not feel unprepared to complete the stretch features, I just more time and most likely more practice with the concepts we learned during the week.
- If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.
If I had more, I would have worked on the votes stars, as of now, I only have emoji embedded, and I would have given users option to see the actual stars that match the vote average
- Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?
All the features I have went well, I think what did not go as planned is the load More button at the bottom that is not getting centered as I wanted so I just centered the text and made the background color inexistant. I noticed that some of my peers spend a good of time making their website more asthetic, even though mine is not that bad in terms of asthetic, I could always add more CSS.
Give a shout out to somebody from your cohort that especially helped you during your project. This can be a fellow peer, instructor, TA, mentor, etc. TA Yilika Loufoua