
iTunes API Adventures: A Journey Through a Project
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:
- What is my end goal? What information do I need to gather or reach to make that happen?
- 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?
- What do I know? What knowledge do I lack and need to ask questions on/ find on Stack Overflow?
- 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:
- 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 = ‘’; - 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.
- 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.
- 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!
- 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!
