The learning objective for the exercise is to make use of AJAX (asynchronous javascript) to fetch- and display data and you'll create a simple youtube clone with data from this API.

There's two main user stories to this app:

• A user can search for artists by name and they are displayed as a list so the user can see the search result
• A user can click a search result item and it displays a list of related youtube videos for the user to watch/listen

Create a search field that allows the users to search for artist. The user will see autocomplete suggestions based on his input.

• Have a look at the API and look for the autocomplete method.
• Use the user input to fetch the autocomplete options. Try to log the results to your console when the user presses enter in the input field.
• Next, display the fetched data in a clickable list under the search field

Upon selecting an artist out of the suggestion list, display a list of videos from the selected artist

• Find the correct method to fetch the songs of a selected artist in the API.
• Try to log the data of the selected artist to the console.
• Dynamically create the list of videos

Example using fetch

Start with the provided boilerplate. The boilerplate has a JS folder which contains a script.js that has pre-made functions for the foundations of the project and guiding you in the right direction. And also a css folder with some basic styling to get you started.

• Create an autocomplete search with your AJAX knowledge
• Display the autocomplete options in a clickable list
• Allow the user to select an artist
• Fetch and display the available youtube videos for the selected artist
• Optional: using the YouTube player API display the lyrics of the song that is playing