Because I chose a very strange API to work with, the project was not very straight forward. Even with help and copying and editing code  – I had so much trouble getting this to move forward. However, I heard that someone else had gotten the Pet Finder API to work, so I pressed on.

First of all, it was difficult to know what the first step was to get started. The examples in the P5 book were not relevant to creating buttons with parsed API data, so there was not necessarily a standard to follow – but again, the API I chose what not necessarily the best option. I worked with a resident via email, who shared code to get started which was great. But I still didn’t know WHY any of that code was used. And I also didn’t know how/why the API link was used and generated other than the very strange documentation on the Pet Finder site.

After working with the resident and some office hours, I was able to narrow down the URL that I needed to use (with my special API key from Pet Finder):

http://api.petfinder.com/pet.getRandom?key=42e40d99e0084a1de66ecc959d1bdfa9&animal=dog&location=11106&output=basic&format=json

I hacked the code that I received from the resident but instead of going with the pet.getRandom, I tried for a few hours to use pet.find and really had trouble getting anything off of the ground at all. I tried applying my API to the various examples on github, and still no luck. (With pet.find I was hoping to allow the user to search for specifics instead of at random).

So I switched back to pet.getRandom. Before adding the button, I was able to get the dog’s name to populate in the print() area of the p5 console:

However, when I went to add the button, I began to get errors, saying that words were not recognized, even though they were working just fine prior to button-ing:

BEFORE CLICKED

AFTER CLICKED

At this point I believe I must be missing a function that calls the data to print in the browser. Also there may be an issue with the parsing. BUT still it doesn’t make sense that this code does not work when the button is pressed but seems to understand when there is no button at all.

I also have this weird thing, if I don’t // out the following code:

myP = createP(petinfo.name);
myP.style(‘font-size’, ’24pt’);

I went through the code that I had been given and it turns out I was missing a function. I added that in, and was still experiencing the same issue. The P5 console printed out the names of the dogs, but nothing appeared in the browser. So I added an if mousePressed == true statement and still no luck.

In my last attempt at coding, I kept trying to find a way to replace and remove and reload the browser for each new search. I tried various things like myP.remove(), and even going into draw and drawing a new rect(), among other things. I was eventually led to Marc Abbey who was able to:
1) get the screen to reset every time by creating a container.div(‘ ‘) and filling it with an empty string.
2) Help make the pictures appear by adding the createImg where I had the wrong code.
3) Set up if statements so that undefined answers appeared blank rather than “underfined.”

:::HERE IS THE API IN ACTION:::

It is hard to take credit for this, as it is the mish mosh of various people’s codes put together. To be honest, I am not sure how anyone can take credit for any code, as it seems like code is the of the creation of someone else and is copied and recopied and changed and repackaged.

But I guess that is how you learn to code?

There was no time to make this look anything but beta, as time ran out.

Special thanks to:
John Farrell, Dan Shiffman & Mark Abbey for their coding skills and guidance for making this possible.