Assignment 2 PDF

Preview

Summary

Assignment 2...

Description

Faculty of Science Course: Assignment: Topic:

CSCI 3230U: Web Application Development #2 Web services, Node.js

Overview This assignment collects information from two different sources: your own web service, providing show times, and the OMDB web service providing movie data. The information is collected together into a single page that shows all of the show times, and shows details about the movie for a specific show time, when clicked. The colour scheme used by this website is illustrated in table 1, below: Name primary secondary tertiary

Colour Value #D0D0D0 #414A79 #959BBC Table 1 - The colours used in this assignment

The Header The top of the page is a simple header. The header is a solid background, the secondary colour, with text in the tertiary colour. This header is shown in both figure 1 and figure 2.

The List of Show Times In the middle of the page is a list of show times. These are retrieved from a web service, but in this case you will create that web service in Node.js. You will create a simple Node.js application that has only a single endpoint: /showtimes. When accessed, this endpoint will generate a list of show times in the format shown in figure 1. The title of the movie is displayed in the left column of a table, where the title of the movie is also a link. The show times for that movie are displayed in the right column, each in their own element, so they appear on separate lines. When the title link is clicked, the movie details page will be displayed, showing details for the selected movie. The background for this section will be in the primary colour, and the text in the secondary colour. The title of the movie is a link, but should be styled such that each link has a padding of 0.5rem, and a rounded rectangle border. When hovering, the link's background and foreground colours should be reversed. Both columns' text will show up as bold. The output from our show times web service will always be the same, though if we changed this web service to generate dynamic data, the rest of the application should still work the same way.

Figure 1 - The list of show times (before any show time has been clicked)

2

Code Listing 1 – The JSON response from our show times API [ { id: 'tt0059742', detailsURL: '/movieDetails?id=tt0059742', title: 'The Sound of Music', times: ['7:15pm', '8:40pm'] }, { id: 'tt0059113', detailsURL: '/movieDetails?id=tt0059113', title: 'Doctor Zhivago', times: ['7:35pm', '8:10pm', '9:05pm'] }, { id: 'tt0059243', detailsURL: '/movieDetails?id=tt0059243', title: 'The Great Race', times: ['6:45pm', '9:15pm'] }, { id: 'tt0059578', detailsURL: '/movieDetails?id=tt0059578', title: 'For a Few Dollars More', times: ['8:05pm', '9:40pm'] }, { id: 'tt0059661', detailsURL: '/movieDetails?id=tt0059661', title: 'The Rounders', times: ['4:10pm'] }, { id: 'tt0059800', detailsURL: '/movieDetails?id=tt0059800', title: 'Thunderball', times: ['8:00pm'] } ]

The Movie Details At the bottom of the page, the movie details will be shown. This data will come from the OMDB web service, provided at https://www.omdbapi.com. The output of our show times web service included IMDB IDs for each of the movies, and these can be used as a primary key in the OMDB database, to find the details about that movie, including actors, directors, ratings, plot summary, etc. In order to use this service, you will need to sign up for a free API key. The usage of the OMDB API will follow the following URL format: `http://www.omdbapi.com/?i=${id}&apikey=${apiKey}` Initially, this entire section is hidden. When shown, however, there should be a solid black border along the top (separating the show times from the movie details, which have the same colour scheme). The background for this section will be in the primary colour, and the text in the secondary colour. The appearance for this section should match Figure 2. For the IMDB Rating field, instead of displaying as a value between 0.0 and 10.0, you will represent the floor of the rating, and show that number of trophy icons. This trophy icon is provided (award.png ).

Figure 2 - The list of show times with the movie details for Dr. Zhivago

How to Submit Add your HTML, CSS, and JavaScript files to a ZIP file (e.g. Assignment2_RandyFortier_100000000.zip) and submit to the Assignment 2 drop box on Blackboard.

4...