Skip to content

CURRENT - 2023 SITE Starter code for Flixster assignment

Notifications You must be signed in to change notification settings

PelumiTayo/Flixster

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📝 NOTE Use this template to initialize the contents of a README.md file for your application. As you work on your assignment over the course of the week, update the required or stretch features lists to indicate which features you have completed by changing [ ] to [x].

Week 1 Assignment: Flixster

Submitted by: Pelumi Tayo-Orisadare

Estimated time spent: 27 hours spent in total

Deployed Application (optional): Flixster deployed website: https://pelumitayo.github.io/Flixster/

Application Features

Core Features

  • 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 (yes)
    • Each movie wrapper element should have a class of movie-card (yes)
  • For each movie displayed, user can see the following details:
    • Title - the element should have a class of movie-title (yes)
    • Image - the img element should have a class of movie-poster (yes)
    • Votes - the element should have a class of movie-votes (yes)
  • 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. (yes)
    • 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

Stretch Features

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

Walkthrough Video

Reflection

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

    The topics discussed in our labs definitely prepared me for the assignment specifically the topic on APIs and git. Although the topic on APIs was good, I still felt slightly unprepared and ultimately overwhelmed by the process. There was a lot of googling that needed to be done, but I believe that is what I am to expect if I want to be an engineer. I really enjoyed mob programming and walking through code togehter as a class, it was much easier to grasp concepts that way.

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

    I would have definitely added a popup feature and the movie trailer feature to my code, I think would have been a very cool feature to have.

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

    I did not do a project demo for this week, somehing that I saw my peers implement that I will definitely take note of is the use of keyframes to make their code more visually appealing as well as more accessibiility features, specifically, a dark mode and light mode.

Open-source libraries used

  • Add any links to open-source libraries used in your project. None Used.

Shout out

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. Shout out to A'shaun for being a great resource and an even amazing teacher, additionally shoutout to Sammy for explaining when it comes to his ability to explain concepts through. Shoutout to Kelechi for helping understanding async function. Shoutout to Iden for being a great pair programmer!

About

CURRENT - 2023 SITE Starter code for Flixster assignment

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 53.9%
  • CSS 31.1%
  • HTML 15.0%