diff --git a/js/tv_browser.js b/js/tv_browser.js index da72d19..5b87957 100644 --- a/js/tv_browser.js +++ b/js/tv_browser.js @@ -1,2 +1,73 @@ // API Docs at: // http://www.tvmaze.com/api + +/* global $ */ + +var showSelect = $('#show-select') +var showSearch = $('#show-search') +var showDetail = $('#show-detail') + +// show-select should be hidden by default +showSelect.hide() + +var populateSearchResults = function (query, results) { + showSelect.children().remove() + // the first select option should read "Shows matching keyword…". + var html = `` + // it should be populated with all search results. + results.map((tvShow) => { + html += `` + }) + showSelect.append(html) + // the "#show-select" field should be un-hidden. + showSelect.show() +} + +// populate the "#show-detail" div with that show's +// name and image. +var displayDetails = function (show) { + showDetail.children().remove() + var name = `

${show.name}

` + var image = `` + showDetail.append(name) + showDetail.append(image) +} + +var queryShows = function (e) { + e.preventDefault() + + var query = showSearch.val() + var url = 'http://api.tvmaze.com/search/shows?q=' + query + + $.ajax({ + url: url, + type: 'get', + dataType: 'json' + }).done((response) => { + populateSearchResults(query, response) + }).fail((response) => { + console.log('GET show search failed') + }) +} + +var queryShow = function (e) { + var idSelected = $('option:selected', this).attr('id') + var showUrl = 'http://api.tvmaze.com/shows/' + idSelected + + $.ajax({ + url: showUrl, + type: 'get', + dataType: 'json' + }).done((response) => { + displayDetails(response) + }).fail(() => { + console.log('Get Show Request Failed') + }) +} + +// submit listener +$('input[type="submit"]').on('click', queryShows) +// textbox change on input listener +showSearch.on('input', queryShows) +// select show listener +showSelect.on('change', queryShow)