janarosmonaliev / flixster Goto Github PK

Submitted by: Carlos David Amezcua Canales

Estimated time spent: 15 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
• For each movie displayed, user can see the following details:
  • Title - the element should have a class of movie-title
  • Image - the img element should have a class of movie-poster
  • Votes - the element should have a class of movie-votes
• 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
• 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-btn that exits the search, clears results, and shows the current movies displayed previously
• 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!

• 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 topics discussed in the labs did prepare me to complete the assignment. The concepts and techniques covered in the labs provided a solid foundation for building the necessary features in my weekly assignment.

• 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.

Instead of using emojis, I would have used icons to represent various elements or actions in the project. Icons can provide a more consistent and professional visual representation. Also, I would have added a carousel or a slider to display multiple videos related to the movie in the pop-up dialog. This would allow users to easily browse and view different video options without leaving the dialog.

• 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?

The project demo went well overall. The basic functionality of displaying movie information and allowing users to search and view movie details was successfully demonstrated. During the project demo, I received feedback from the teacher that highlighted a strange behavior in the search functionality. This feedback was valuable as it helped me identify an issue that needed to be addressed. I took the feedback and worked on correcting the problem.

• N/A.

I want to express my sincere appreciation to Tim Lee for his tremendous help and valuable feedback throughout the project.