Last week, we solved the code challenge #4: Build An Eye Tracking App with JavaScript.
This week we will be looking at consuming API’s and utilizing APIs to fetch reusable data.
The Challenge
The challenge is basically to build a movie trailer player with image thumbnails for a playlist and a section to display selected video. The final product should look like this, howevever feel free to try out any awesome tweaks.
The goal is to diplay a list of movies with their thumbnails and play a trailer once it’s movie thumbnail is clicked. This challenge can be solved using any method, tools and frameworks.
An API containing movie titles, poster image URL and trailer URL is provided in the base codepen.
The API URL is: https://scotch-mvplayer-api.herokuapp.com/api/v1
Requirements
Complete this challenge using any tool you like. Angular, React, Vue, or plain JavaScript. It’s all game!
- Have a section for movies and a section to display selected movie.
- Once a movie thumbnail is selected, display the corresponding trailer.
Goals of this Challenge
- Connect to an external API
- Display data from that API
- Update the video player based on HTML events
Bonus
Just to have more fun, you can display the name and year of release of each movie as a text overlay on the thumbnails.
Resources
Check out the base code for this challenge including an API containing movie titles and basic information on the movies.
Fork the base codepen here as your starting point.
The API URL to get the movies list is: https://scotch-mvplayer-api.herokuapp.com/api/v1
Community
- Join the Slack group to interact with others and share ideas on the Slack Channel #codechallenge.
- Post your solutions in the comments.
- Post your solution on twitter using the hashtag #scotchchallenge.
Solution
The solution to this challenge will be released on Friday. Happy coding!