Build a music player using the iTunes API.
In this iTunes API tutorial you’ll learn how to build a rather nifty music video player that generates a menu of playable music videos from the iTunes API. Source code (and live demo) available here: https://codepen.io/codebubb/pen/BqZyRe The first thing you’ll do in this iTunes API tutorial is setup the markup and structure of the music video player app. There’s only a few things to do here, create a boilerplate HTML template, setup some CSS resets for things like the body and font. You’ll then add some div elements to hold our results from the API lookup and also an overlay to blur out elements when the user is entering a new search term. Once this is setup you’ll learn how to send the request to the iTunes API using the Fetch API which is available in most modern browsers. You’ll learn how to use the Promise chain that’s used with Fetch and how to get the JSON response from the API to store in a variable. With the response from the API you can then create a block of HTML with the image URLs which will then display when the user clicks a search. You’ll also learn how to setup the event listeners for when the user clicks on a video to play it in the browser and also how to close the video when the user clicks on a backdrop overlay. For the final tweaks in our iTunes API tutorial you will add some effects to the page in terms of hover events, reflection to give more depth to the container images. You will also add in some responsive rules to make the player appear correctly on smaller and mobile devices.