Description

CS-546 Lab 11 AJAX
For this lab, you will be using HTML, JQuery and Client-side JavaScript on the user’s browser to make a simple application that makes AJAX requests for the data needed and then inject the elements and data onto the page.
TV Maze API
For this lab, you will be using three endpoints of the TV Maze API for your AJAX calls. The list of shows: http://api.tvmaze.com/shows (http://api.tvmaze.com/shows) and then you’ll get an individual show using the endpoint http://api.tvmaze.com/shows/:id (http://api.tvmaze.com/shows/:id) where :id is the ID of the show you are looking up. You will also use http://api.tvmaze.com/search/shows? q=search_term (http://api.tvmaze.com/search/shows?q=search_term) to search the API
The Server
Your server this week should not do any of the processing or calculations. 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 footer with your name, student ID, and any other info about yourself you wish to include An empty unordered list with an id of showList that is initially hidden.
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 , an
img 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)
Style:
You are NOT required to use CSS for this lab (but you can if you want to).
Requirements
1. All previous requirements still apply.
2. You must remember to update your package.json file to set app.js as your starting script!
3. Your HTML must be valid (https://validator.w3.org/#validate_by_input) or you will lose points on the assignment.
4. Your HTML must make semantical sense; usage of tags for the purpose of simply changing the style of elements (such as i , b , font , center , etc) will result in points being deducted; think in terms of content first.
5. You can be as creative as you’d like to fulfill front-end requirements; if an implementation is not explicitly stated, however you go about it is fine (provided the HTML is valid and semantical). Design is not a factor in this course.
6. Your client side JavaScript must be in its own file and referenced from the HTML accordingly.
7. All inputs must be properly labeled!