JavaScript exercise for ACT.md UI Engineer position

actmd_js_excerise.md

JavaScript exercise for ACT.md UI Engineer position

Your task is to implement a view that is able to display a list of video titles using a paginated search API; in this case, Google's YouTube API.

You may use any JavaScript framework you like. At ACT.md we use Backbone and Marionette, but choose Angular, Ember, etc., if that's more comfortable.

There are also many ways to approach the UX of this problem -- you can pick your favorite. For example:

• The list initially renders the first page of data. While there are more results that have not been fetched, a "Show more results" link will fetch the next page of results and append them to the list.
• The list initially renders the first page of data, with next/previous links available to navigate through other pages of data
• The list has a fixed height, and as the user scrolls down, more results are seamlessly fetched and appended to the bottom of the list.

The data is available from the Google APIs REST endpoint '/youtube/v3/search', which will return a list of Youtube video details.

URL

• GET https://www.googleapis.com/youtube/v3/search

Parameters

• maxResults: The maxResults parameter specifies the maximum number of items that should be returned in the result set. (integer, 0-50)
• pageToken: The pageToken parameter identifies a specific page in the result set that should be returned. In an API response, the nextPageToken and prevPageToken properties identify other pages that could be retrieved. (string)
• part: Type of results to return, in this example we will use snippet to load a snapshot of the video details (shown below)
• key: API key (supplied below)

Example request data

{
  "maxResults": 20,
  "part": "snippet",
  "key": "AIzaSyDooeiZVrFs_K7EHQHvEpnqVF_S2gg3am0"
}

Example response

{
 "kind": "youtube#searchListResponse",
 "etag": "\"zekp1FB4kTkkM-rWc1qIAAt-BWc/8HhYSaVqx1IKzjIWBnc1F81irdI\"",
 "nextPageToken": "CAUQAA",
 "regionCode": "US",
 "pageInfo": {
  "totalResults": 1000000,
  "resultsPerPage": 5
 },
 "items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"zekp1FB4kTkkM-rWc1qIAAt-BWc/pTm4zGbVe0XrnQbFdAlf5EBpaUc\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "WSinMOs5eGw"
   },
   "snippet": {
    "publishedAt": "2015-04-11T20:02:37.000Z",
    "channelId": "UCUtZaxDF3hD5VK4xRYFBePQ",
    "title": "Golden boy Calum Scott hits the right note | Audition Week 1 | Britain's Got Talent 2015",
    "description": "See more from Britain's Got Talent at http://itv.com/talent Calum appears nervous as he takes to the stage after his sister Jade fails to win the backing of the ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/WSinMOs5eGw/default.jpg",
      "width": 120,
      "height": 90
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/WSinMOs5eGw/mqdefault.jpg",
      "width": 320,
      "height": 180
     },
     "high": {
      "url": "https://i.ytimg.com/vi/WSinMOs5eGw/hqdefault.jpg",
      "width": 480,
      "height": 360
     }
    },
    "channelTitle": "Britain's Got Talent",
    "liveBroadcastContent": "none"
   }
  }
 ]
}

Learn more and expermient with the API in the Google API explorer: https://developers.google.com/apis-explorer/#p/youtube/v3/youtube.search.list

Post your functioning code, with any supporting HTML and CSS, on JSFiddle, JSBin, CodePen, or the like, and send us the link.

If you have any questions or encounter any issues, please don't hesitate to email Rachel rachel@act.md or Jonathan jonathan@act.md.

Best of luck! ~ ACT.md