Front-End Coding Challenge

Task

Create a simple interface for viewing the latest Batman movies as a vertical list of ten movies which can also be filtered by decade.

A UI mockup can be found in the included moviemock.sketch file (or moviemock.pdf if you don't have Sketch). Only one movie is shown in the mockup, but use that as a template for the other 9.

Requirements

  • Build using the latest version of AngularJS or Angular, whichever is most comfortable to you.
  • Use SASS to write your css and compile it down.
  • Write your JavaScript using either vanilla js or using TypeScript and compile it down.
  • Build and include at least one Angular component.
  • Make sure your code is supported by Chrome, FF, and IE11.
  • Publish your completed project to a github repo provide us with a link.

APIs

Sign up for a free api key to use the Movie service here: http://www.omdbapi.com/apikey.aspx

Using the first 10 results of this api search for batman movies: http://www.omdbapi.com/?s=Batman

Take those results and look up details for each movie returned using this api pattern: http://www.omdbapi.com/?i=tt0372784 (where i = the imdb id found above)

Hint: Images will be blocked from hotlinking. Manually download all of those images to the project first, then reference them locally (parse the url string from the response).