Reference no: EM133263404

EJS, API and Forms

For this homework you will need to call the API provided by Apple to query music artists. In particular, we will use this endpoint:

In the endpoint above, replace <searchitem> with an artist name of your choice to search for, to test this endpoint in either a browser or Postman. For instance, searching for Metallica would result in the following JSON response:

 

We are interested in listing the top 10 results with the following information for each result:
• Artist Name
• Track Name

If there are fewer than 10 results, we want to show them all.

Naturally we don't want to present the user with JSON formatted data, so you will need to present the JSON data to die user in readable and formatted HTML (e.g. in individual labels, in fonn of a list, as individual paragraphs, etc.) The choice is yours.

The user should see a headline on the website stating that this is a website to search for music bands. Also there should be a Text Box where the user enters their search term. You can show the results underneath. you don't have to create a new page for it (you can if you want).

If you use the EJS template from class, make sure you remove the parts of the UI that aren't needed. For instance. there should not be an About page with cars or mascots in your project. and neither the variables for those. Only code that's part of the assignment should be there. If you start this project from scratch without the class template. then you don't have to worry about that.
A sample mockup screen could look like this:

 

Hint: Make sure you understand the hierarchy of the JSON response: The information we need is not directly on the result JSON response of the API call.

EXTRA. CREDIT: Add a checkbox underneath the textbox. This checkbox should have the caption: "Show Album Cover?" and if checked. show the 100x100 icon of each result alongside each result.