Last week, we solved the code challenge #4: An Eye Tracking with JavaScript.

This week we will be looking at consuming API’s and utilizing to fetch reusable .


The challenge is basically to build a trailer 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:


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


Just to have more fun, you can display the name and year of release of each movie as a text overlay on the thumbnails.

Check out the base 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:


  • Join the Slack group to interact with others and share ideas on the Slack Channel #codechallenge.
  • Post your in the comments.
  • Post your solution on twitter using the hashtag #scotchchallenge.


The solution to this challenge will be released on Friday. Happy coding!

Source link
thanks you RSS link


Please enter your comment!
Please enter your name here