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

This mission is to be accomplished individually. Session with classmates is allowed however don’t write the code collectively. The submitted code have to be your personal work.

Whole: 70 factors

Warning: Begin EARLY. Do NOT wait until the final day. Keep in mind to quote all sources of your code. Do NOT use any code from the online with out correct acknowledgement. Each Firefox & Chrome ought to work for this mission. The code can get sophisticated with too many curly braces and parentheses. So, be vigilant. Add code in very small chunks, confirm that the code works after which add extra code. When you get caught on one thing, contact me. Have enjoyable!

PART 1 (20 factors): Collect information from Itunes Feed

https://itunes.apple.com/rss can generate RSS feeds for a lot of completely different merchandise within the iTunes retailer. For this mission, we will likely be utilizing the topsongs feed. The overall URL for topsongs is:

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

the place CODEFORCOUNTRY will be “us” for United States or “ng” for Nigeria or “tr” for Turkey and NUMBEROFTOPSONGS will be within the vary of 10-300.

Write Javascript utilizing jQuestion Assignment to show the next data from the XML feed to an HTML web page:

1. The title of the track (three factors)
2. The identify of the artist (three factors)
3. The album of the track (four factors)
4. The picture related to the track (Be aware that there are three pictures of various dimension, select one dimension solely) (5 factors)
5. The hyperlink to audio clip (5 factors) (Be aware that there are two hyperlink tags. Select one.)

You will get another data from the feed that’s of curiosity to you. WK13 train will likely be useful.

PART 2 (5 factors): Play Audio Clips

This half requires you to show your self tips on how to use the audio tag. Based mostly in your HTML data, you need to be capable of determine this out. For reference, look right here: http://www.w3schools.com/html/html5_audio.asp

PART three (20 factors): Add Consumer Interplay (UI)

Add the next to your HTML & JavaScript:

1. A drop down menu to decide on the highest songs of one in every of three nations of your selection. Of the three nations, select one nation (non-English talking) whose track you’ve gotten by no means heard. WK11 PPT slides will likely be useful. (three)
2. Use a slider widget to decide on the variety of songs to show with a spread of 5-30. WK11 train/demoWidgets will likely be useful. (6)
3. Javascript/jQuestion Assignment code to take person enter and replace the next hyperlink the place the worth for CODEFORCOUNTRY will likely be taken from (a) and the worth for NUMBEROFTOPSONGS will likely be taken from (b) (eight)

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

• A button when clicked will parse/learn the itunes feed (three)

For each search, be sure to clear the div part the place you’re displaying the track data.

PART four (10 factors): Use the YouTube API

Right here is the YOUTUBE API hyperlink the place searchTerm, SomeNumber and YOUR_API_KEY must be crammed:

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

For every track within the itunes feed, create a search time period from the info you collected from the RSS feed. What could be an applicable search time period? What could be an applicable quantity for maxResults?

Parse/learn the info you get from the YOUTUBE API to get the id of the video. Use the id to create a clickable hyperlink to the youtube video. For instance, if the id is “RFinNxS5KN4”, then the hyperlink will likely be “http://www.youtube.com/watch?v=” + id.  Don’t embed the video.

Create the HTML to show the video hyperlink together with all different data you gathered from the itunes feed earlier. Be sure to append the HTML throughout the perform that parses/reads the YOUTUBE API information. WK13 train will likely be very useful.

Error Checking: When a video id of a track is just not discovered, as a substitute of displaying a youtube hyperlink, print that the video for that track was not discovered. Take a look at and ensure this works by trying to find one thing that may return no end result.

Code Feedback (5 factors)

Embody feedback to your code- each HTML and JavaScript. Feedback needs to be correct and detailed sufficient in order that anybody who reads your code will be capable of perceive this system with none rationalization from you. One other means to consider it’s that should you learn this code one yr from now, you need to be capable of perceive what this system does. If there are any points together with your code or quirks that I ought to pay attention to throughout grading, embody them in a readme.txt file.

Creativity (10 factors)

Add your personal inventive model to the webpage- make it your personal and impress your self! Nevertheless, do remember that different individuals could be utilizing the webpage (on this case, me!) so preserve the colours, font dimension, format, graphics and many others. readable and usable. Don’t select crimson font on a blue background for instance.

Submission

Add all of your information as a .zip file to Blackboard underneath Submit Assignments -> Remaining Undertaking. Identify your file as YourUsername_FP.zip
e.g. If I have been to add it, it might be mutsuday_FP.zip