[icm week 8] Soulmate Machine (data & APIs)

Screenshot 2015-10-26 00.07.42

(TLDR: Check out the Soulmate Machine here.)

For this week’s assignment to work with data, I’m not sure why, but I knew pretty quickly that I wanted to use Petfinder’s API.

If you are tragically unfamiliar, Petfinder is a website where you can find all sorts of adoptable pets across the country.

I signed up for an API key, read the documentation, and got to work pulling JSON from their site. They had a rather interesting “get random” method that allows you to find a random pet in their database, picking from specific characteristics like breed, size, age, and more.

I thought it’d be fun to make some kind of pet “matchmaking” based on some questions you were asked. (I certainly have a soft spot in my heart for internet quizzes).

I picked 5 questions for 5 characteristics — location, gender, species, age and size. Each answer sets a different result. For example, if you pick “bud light” under question 3, you’ll get a dog.

Screenshot 2015-10-26 00.20.45

The page is not much to look at, and that’s largely because I had a lot of confusion with combining DOM in p5 and also editing CSS and the HTML file simultaneously…Organizing things on the page in a way that didn’t look awful was difficult (and I still haven’t succeeded). I also couldn’t figure out how to do certain things like make a button open a link. I think the combination of using P5 and CSS was confusing in particular.

Sometimes, particular answers don’t actually have any adoptable pets (for example, an extra-large baby pig in New York). One challenge I had was figuring out how to 1) read the JSON file to confirm that this was the case, and 2) write the code in p5 to reflect if there was no match. I’m happy to say I sorted it out by looking in the JSON file and seeing that there was no “pet” name when there was no match, so I simply wrote the line if (data.petfinder.pet == undefined) followed with some text saying that there was no match.

Screenshot 2015-10-26 00.36.43

The concept for this project was a bit silly (which is increasingly looking like a theme in my work…), but the nice thing about using a real API is that it’s actually connected to the real world of pets that need homes. On the match page, you can click the “in love” link to go directly to your soul mate’s Petfinder page, and maybe even adopt!

You can try Soulmate Machine here. My P5 code is below.

var selectSze, selectAge, selectGender, selectAnimal, inputZip;
var textSze, textAge, textGender, textAnimal, textZip, textIntro;
var button1, button2;
var imagePet;
var animalPick, genderPick, agePick, szePick;

function setup() {
  noCanvas();

  textIntro = createP("let me help you find your soulmate :)");
  textIntro.id("h1");

  textZip = createP("1. what's your ZIP code?");
  textZip.id("question");
  inputZip = createInput();
  inputZip.id("input");

  textGender = createP("2. what gender do you prefer in a soulmate?");
  textGender.id("question");
  selectGender = createSelect();
  selectGender.id("input");
  selectGender.option("");
  selectGender.option("female", "F");
  selectGender.option("male", "M");
  selectGender.option("why would i care?", "either");
  selectGender.changed(genderEvent);

  textAnimal = createP("3. what do you usually order at the bar?");
  textAnimal.id("question");
  selectAnimal = createSelect();
  selectAnimal.id("input");
  selectAnimal.option("");
  selectAnimal.option("bud light", "dog");
  selectAnimal.option("lambrusco", "cat");
  selectAnimal.option("mezcal margarita", "bird");
  selectAnimal.option("tequila shotzzz!!", "reptile");
  selectAnimal.option("baked potato, no butter", "pig");
  selectAnimal.changed(barEvent);

  textAge = createP("4. what's your favorite movie?");
  textAge.id("question");
  selectAge = createSelect();
  selectAge.id("input");
  selectAge.option("");
  selectAge.option("gone with the wind", "Senior");
  selectAge.option("raiders of the lost ark", "Adult");
  selectAge.option("hunger games", "Young");
  selectAge.option("minions!!", "Baby");
  selectAge.changed(ageEvent);

  textSze = createP("5. what tasty fruit do you like the most?");
  textSze.id("question");
  selectSze = createSelect();
  selectSze.id("input");
  selectSze.option("");
  selectSze.option("blueberry", "S");
  selectSze.option("apple", "M");
  selectSze.option("pineapple", "L");
  selectSze.option("watermelon", "XL");
  selectSze.changed(szeEvent);

  createP("");
  button1 = createButton("please find my soulmate");
  button1.mousePressed(update);
  button1.id("button");

}

function barEvent() {
  if (selectAnimal.value() == "dog") {
    animalPick = "dog";
  }

  if (selectAnimal.value() == "cat") {
    animalPick = "cat";
  }

  if (selectAnimal.value() == "bird") {
    animalPick = "bird";
  }

  if (selectAnimal.value() == "reptile") {
    animalPick = "reptile";
  }

  if (selectAnimal.value() == "pig") {
    animalPick = "pig";
  }
}

function genderEvent() {
  if (selectGender.value() == "F") {
    genderPick = "F";
  }

  if (selectGender.value() == "M") {
    genderPick = "M";
  }

  if (selectGender.value() == "either") {
    genderPick = "";
  }
}

function ageEvent() {
  if (selectAge.value() == "Senior") {
    agePick = "Senior";
  }

  if (selectAge.value() == "Adult") {
    agePick = "Adult";
  }

  if (selectAge.value() == "Young") {
    agePick = "Young";
  }

  if (selectAge.value() == "Baby") {
    agePick = "Baby";
  }
}

function szeEvent() {
  if (selectSze.value() == "S") {
    szePick = "S"
  }

  if (selectSze.value() == "M") {
    szePick = "M"
  }

  if (selectSze.value() == "L") {
    szePick = "L"
  }

  if (selectSze.value() == "XL") {
    szePick = "XL"
  }
}

function update() {

  selectSze.hide();
  selectAge.hide();
  selectGender.hide();
  selectAnimal.hide();
  inputZip.hide();
  textSze.hide();
  textAge.hide();
  textGender.hide();
  textAnimal.hide();
  textZip.hide();
  button1.hide();
  textIntro.hide();

  var url = 'http://api.petfinder.com/pet.getRandom?&&format=json&output=full&key=63703cf6c3d40b73af4e939adda7da4f'
  var zip = inputZip.value();
  loadJSON(url + '&animal=' + animalPick + '&location=' + zip + '&sex=' + genderPick + '&age=' + agePick + '&size=' + szePick, getPet, 'jsonp');

}

function getPet(data) {
  if (data.petfinder.pet == undefined) {
    var textFailed = createA("https://nicole.pizza/itp/icm/week8-soulmatemachine/", "Sorry, there's no soulmate for you. Try again.");
    textFailed.id("question");
    textFailed.position(400, 200);
  } else {
    var petName = data.petfinder.pet.name.$t;
    var petType = data.petfinder.pet.animal.$t;
    var petDescription = data.petfinder.pet.description.$t;
    var petCity = data.petfinder.pet.contact.city.$t;
    var petState = data.petfinder.pet.contact.state.$t;
    var petPic = data.petfinder.pet.media.photos.photo;
    var petID = data.petfinder.pet.id.$t;



    var textCongrats = createP("congratulations! your soulmate is...");
    textCongrats.id("h1");

    var textPetName = createP(petName);
    textPetName.id("name");

    imagePet = createImg(petPic[3].$t);
    imagePet.id("image");
    createP("");
    var adopt = createA("https://www.petfinder.com/petdetail/" + petID, "click here if ur in love");
    adopt.id("links");
    createP("");
    var restart = createA("https://nicole.pizza/itp/icm/week8-soulmatemachine", " click here if ur not feeling it to start over");
    restart.id("links");

    var textPetType = createP("Type: " + petType);
    textPetType.id("text");
    textPetType.position(600, 150);
    var textLocation = createP("Location: " + petCity + ' , ' + petState);
    textLocation.id("text");
    textLocation.position(600, 170);
    var textPetDescription = createP("Description: " + petDescription);
    textPetDescription.id("text");
    textPetDescription.position(600, 190);

  }

}

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: