Code Challenge #5: Build A Movie Player

William Imoh
👁️ 2,395 views
💬 comments

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.

Table of Contents

    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!

    1. Have a section for movies and a section to display selected movie.
    2. 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!

    William Imoh

    22 posts

    Developer, Developer Advocate, Changing the world one semi-colon at a time!