A cool wall under a lush grove of trees at Brookhaven College in Farmers Branch, TX. Photo taken by me.

iTunes API Adventures: A Journey Through a Project

Stefanie Boscarino
Jul 22, 2017 · 4 min read

Our current project utilizes API’s. I am currently creating a page that not only looks good but is functional — it utilizes the iTunes API.

When faced with any project(not just in programming), I begin with big picture things first and then work to the more specific. Sometimes, I work back and fourth between my big picture and my smaller processes to keep things running smoothly.

Here’s my thought process for my current project:

  1. What is my end goal? What information do I need to gather or reach to make that happen?
  2. Within that end goal, what processes need to take place? Where does the information that I need come from? When I get the data, to where do I store it/make it viewable ?In what order does each process need to happen to make this successful?
  3. What do I know? What knowledge do I lack and need to ask questions on/ find on Stack Overflow?
  4. I begin by creating an outline in comments. Just quick stuff — my thoughts as I think them — it’s mostly gibberish.

Then, the actual coding:

  1. I create my querySelectors first in order to grab components I need to work with. I ended up with quite a few. The job of these guys is to grab parts of my existing html and help me interact with it specifically.
    let searchButton = document.querySelector(‘.search-button’);
    let searchInput = document.querySelector(‘.input’);
    let resultsSection = document.querySelector(‘.results’);
    let musicPlayer = document.querySelector(‘.music-player’);
    let searchResultsWords = document.querySelector(‘.searchResults’);
    let originalURL = ‘https:itunes.apple.com/search?term=’;
    let finalURL = ‘’;
  2. I create an eventListener that will wait for a click. On click, it will take the info typed by the user into the search box(also querySelected) and adds it to my URL. It then performs a fetch data request from the API using my new URL with search query attached. This data is returned as an object with an array inside, chock full of delicious data! I have console.logged this so I can see it.
  3. Now that we know where the data is, we can loop through it with a function that accepts it. As it loops, I make the information from the user lowercase AND used includes() as well as .toLowerCase() make lowercase any artist names or tracks found so that they can match up a little better.
  4. Within the same loop, I created a variable and used template literals to dynamically add my data within a div to a section which was querySelected in the beginning. Now the album, artist, and track name are added to my page when I search! Hoorah!
  5. Below this section but within the loop, I then added a function for playing audio. What good is a music search if you can’t listen to some tasty music samples! At this point, I realized that there was no way to play audio because, you guessed it, theres nothing listening in order to play the audio! Oops! I set a new listener to wait for a click on my divs(using a shared class), went backwards in my code and added that class to each dynamically created parent div. Now my audio plays. But, uh-oh…it doesn’t pause on click. My eyes roll back into my head and begin my Google. Of course it’s element.pause(). Of course it is. It’s so obvious…why didn’t I think of that??! I see what other coders have done to implement audio. I find that a simple if else is best and build this:

let divSelector = document.querySelector(‘.musicDiv’); //Sel template literal
divSelector.addEventListener(‘click’, function(evt){
var audio = document.getElementById(‘audio’); //from ID in template literal
if (audio.paused)
audio.play();
else
audio.pause();
});

6. My final list item: when clicking div, I would like for the track name to show up above my section of data with an audio player of some sort and a slider. Coming soon!!!~

7. D E S I G N. CSS. All of the Flexbox for my divs. Centering. Pretty fonts… added some tasty horizontal rules in my html for added flare. Back to CSS — cool background for a more modern feel. I really enjoy working with colors (I am, after all, an artist!) I open my background image in Photoshop and find some nice hexadecimal colors from my plant and save these. With Flexbox, I rearrange my divs. I adjust the sizing of the album covers. Things look pretty fly! I add some of my saved hexadecimal colors to my text. I try to add some cool buttons/test transitions but can’t get them to work — I comment these out and plan to do some more research a little later. It’s time for rest.

To see this project in its current state, you can look at it here on GitHub!

Stefanie Boscarino

Written by

I enjoy programming, making art, listening to audiobooks, good coffee, anime, and petting my handsome cat, Daniel.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade