CS546-AJAX Solved

The Server
. Your Server only exists to allow someone to get to the HTML Page and download the associated assets to run the application.

 / The Whole Application
This route will respond with a static HTML file and all of the functionality will be done in a client-side JS file.  You will make client-side AJAX requests to the API and use jQuery to target and create elements on the page.

Your page should have a few basic user interface elements:

 A header tag, with an h1 naming your site, with a title for your page

 A div with an id of show that is initially hidden.

A form with an id of searchForm.

A text input with an id of search_term.

 A label with a for attribute referencing your input

A button to submit the form

  A link that links back to the "/" route with the text "Back to All Shows" and that has an id of homeLink This link will initially be hidden. It will ONLY be displayed when the show element is being displayed or ONLY when a search is performed and search results are being displayed.  You should NOT show this link on the initial show list.  This link will simply trigger a reload of the page, which then will display the initial list of shows

AJAX Requests
Remember, you will be ONLY using client-side JavaScript!

1. Page load: When the page loads, you will query the TV Maze API to get the list of shows using an AJAX request.  Once the AJAX request returns the data, you will then create list items of links for each show that is returned using jQuery. The link text will be the name of the show, and the href attribute will be set to the url for that show from the TV Maze API (the url we need for the link is in the data, in the_links.self.href field.)  For the link, you will need to call a function on the click event of the link (do not forget to preventDefault() for the default behavior for the link.  You will then append each list item to the showList UL element and then show the showList element (make sure you hide the show element).  

Endpoint to be used: http://api.tvmaze.com/shows (http://api.tvmaze.com/shows)

2.Search Form Submission: If there is no value for the search_term input when the form is submitted, you should not continue and instead should inform them of an error somehow. (don't forget to take into account if they just submit the form with a bunch of spaces as the value!)  If there is a value, you will first empty the list item elements in the showList element (because there will be elements from the initial showList still there, they are just hidden),  then query the API for that search_term using an AJAX request. Once the AJAX request returns the data, you will then create list items of links for each show that is returned using jQuery. The link text will be the name of the show, and the href will link to the url for that show.  (the url we need is in the data in the _links.self.href field. You will then append each list item to the showList UL element and then show the showList element (make sure you hide the show element).

Endpoint to be used: http://api.tvmaze.com/search/shows?q=search_term_here(http://api.tvmaze.com/shows)

3.Link Clicked: For the link, you will need to call a function on the click event of the link and not the default link behavior (do not forget to use preventDefault()).    When the link to a show is clicked, it will hide the showList element, it will then empty the show  element (just in case there was show data previously loaded into the show element). It will then make an AJAX request to the URL and fetch the data for that show (that was the href in your link).  You will parse through the show data returned from the AJAX request. You will create the following elements using jQuery:  an h1 with the show name ,  animg which the src is set to the value read from image.medium in the data which is a URL to an image for the show,  and a dl (definition list) of the following properties of the matching show: language , genres (the entire array in an ul ), rating.average , network.name , and summary.  You will then show the show  element.  

  NOTE: Not all shows have ALL data displayed on the show  element, which will cause your application to not work correctly when a show link is clicked if it doesn't have all the needed data needed for the show element.  You will be required to check each field needed for the show element.  If there is no value for a field, you will show "N/A" instead of that field's value on the show detail element.  For the image, if there is no image, you can load a generic "no image" image that is served from your public directory.  You can save this one (right click and save the image):

For example:  The show "Hemlock Grove" is missing the network, "Anna und die Haustiere" is missing the image and the Average Rating, "Under Arrest" is missing the Language, the Average Rating and the Network. You would display them similar to shown below.
Endpoint to be used: http://api.tvmaze.com/shows/:id (http://api.tvmaze.com/shows)  (this is read from the href attribute of the link)