Posted: February 23rd, 2022

Client Side Web Programming

Due on 12/08/20 (Tuesday, Dec 8) by 11:00 pm

This project is to be completed individually. Consultation with classmates is allowed but do not write the code together. The submitted code must be your own work.

Total: 70 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. Both Firefox & Chrome should work for this project. The code can get complicated with too many curly braces and parentheses. So, be vigilant. Add code in very small chunks, verify that the code works and then add more code. If you get stuck on something, contact me. Have fun!

PART 1 (20 points): Gather data from Itunes Feed

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 “ng” for Nigeria 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. WK13 exercise will be helpful.

PART 2 (5 points): Play Audio Clips

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): Add User Interaction (UI)

Add the following to your HTML & JavaScript:

1. A drop down menu to choose the top songs of one of three countries of your choice. Of the three countries, choose one country (non-English speaking) whose song you have never heard. WK11 PPT slides will be helpful. (3)
2. Use a slider widget to choose the number of songs to display with a range of 5-30. WK11 exercise/demoWidgets will be helpful. (6)
3. 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

• A button when clicked will parse/read the itunes feed (3)

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

PART 4 (10 points): Use the YouTube API

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&type=video&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/read 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. Make sure you append the HTML within the function that parses/reads the YOUTUBE API data. WK13 exercise will be very helpful.

Error Checking: 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. Test and make sure this works by searching for something that will return no result.

Code Comments (5 points)

Include comments to your code- both HTML and JavaScript. Comments should be accurate and 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 a readme.txt file.

Creativity (10 points)

Add your own creative style to the webpage- make it your own and impress yourself! However, do keep in mind that other people would be using the webpage (in this case, me!) so keep the colors, font size, layout, graphics etc. readable and usable. Do not choose red font on a blue background for example.

Submission

Upload all your files as a .zip file to Blackboard under Submit Assignments -> Final Project. Name your file as YourUsername_FP.zip
e.g. If I were to upload it, it would be mutsuday_FP.zip

Check Price Discount

Study Notes, Research Topics & Assignment Examples: Environmental Science Thesis Help »Public safety