Paper, Order, or Assignment Requirements

Total: 75 points
Extra Credit: +20 points

Bonus points:

+5 points

 

Warning: Start EARLY. Do NOT wait till the last day. Remember to cite all sources of your code. Do NOT use any code from the web without proper acknowledgement. Use Firefox for this project. AJAX/XML has compatibility issues with other browsers. If you get stuck on something, contact me.

 

PART 1 (20 points)

https://itunes.apple.com/rss can generate RSS feeds for many different products in the iTunes store. For this project, we will be using the topsongs feed. The general URL for topsongs is:

https://itunes.apple.com/CODEFORCOUNTRY/rss/topsongs/limit=NUMBEROFTOPSONGS/xml

where CODEFORCOUNTRY can be “us” for United States or “in” for India or “tr” for Turkey and NUMBEROFTOPSONGS can be in the range of 10-300.

 

Write Javascript using jQuery to display the following information from the XML feed to an HTML page:

1. The title of the song (3 points)
2. The name of the artist (3 points)
3. The album of the song (4 points)
4. The image associated with the song (Note that there are 3 images of different size, choose one size only) (5 points)
5. The link to audio clip (5 points) (Note that there are two link tags. Choose one.)

 

You can get any other information from the feed that is of interest to you. Start with WK13 exercise files.

PART 2 (5 points)

 

This part requires you to teach yourself how to use the audio tag. Based on your HTML knowledge, you should be able to figure this out. For reference, look here: http://www.w3schools.com/html/html5_audio.asp

 

PART 3 (20 points)

Modify your HTML & JavaScript to add the following:

 

1. Ability for the user to choose the top songs of one of three countries of your choice (3)
2. Ability for the user to choose the number of songs to display with a range of 5-30 (6)
3. A button when clicked will parse the itunes feed (3)
4. Javascript/jQuery code to take user input and update the following link where the value for CODEFORCOUNTRY will be taken from (a) and the value for NUMBEROFTOPSONGS will be taken from (b) (8)

 

https://itunes.apple.com/CODEFORCOUNTRY/rss/topsongs/limit=NUMBEROFTOPSONGS/xml

For every search, make sure you clear the div section where you are displaying the song information.

PART 4 (10 points): WK14 in-class exercise will be very helpful for this.

 

Here is the YOUTUBE API link where searchTerm, SomeNumber and YOUR_API_KEY need to be filled:

https://www.googleapis.com/youtube/v3/search?q=searchTerm&part=snippet&maxResults=SomeNumber&key=YOUR_API_KEY

For each song in the itunes feed, create a search term from the data you collected from the RSS feed. What would be an appropriate search term? What would be an appropriate number for maxResults?

Parse the data you get from the YOUTUBE API to get the id of the video. Use the id to create a clickable link to the youtube video. For example, if the id is “RFinNxS5KN4”, then the link will be “http://www.youtube.com/watch?v=” + id.  Do not embed the video.

 

Create the HTML to display the video link including all other information you gathered from the itunes feed earlier. When a video id of a song is not found, instead of displaying a youtube link, print that the video for that song was not found.

Make sure you append the HTML within the function that parses the YOUTUBE API data.

Creativity (10 points)

 

Add style to your web page- color, font style, arrangement of information on the page etc. Make sure the styling is user-friendly – for example, don’t use red text on blue background or use fonts that are unreadable on the web. Make it look impressive such that a potential employer might be impressed if you showed it to them in a job interview. But keep it simple such that it is accessible to most users.

Code Comments (10 points)

 

Include comments to your code- both HTML and JavaScript. Comments should be detailed enough so that anyone who reads your code will be able to understand the program without any explanation from you. Another way to think about it is that if you read this code one year from now, you should be able to understand what the program does. If there are any issues with your code or quirks that I should be aware of during grading, include them in areadme.txt file.

Extra Credit (20 points)

Write this part in a separate HTML file. If you complete this, put a link to this page in your main page. Use any plugin (such as the bxSlider plugin) to display the images of the top songs from the itunes feed. When you click on the images, you can do one of two things

1. Play the audio clip (this could open a new window or not)
2. Open the youtube link of the video in a new window