//Sia Chang

​

//For this week's assignment, I create a simple interaction that allows people to see the breeds' names of terrier dogs by clicking a button. 

​

let data;

​

let doggo;

​

function preload(){

  //Calling the API

  // data = loadJSON('https://dog.ceo/api/breeds/list/all');

  //Load background image

  bg = loadImage('bg.jpg');

  doggo =loadImage('bg.jpg');

}

​

function setup() {

  createCanvas(500, 950);

  // console.log(data);

  //console.log(data.message.terrier);

  //Create an 'Enter' button

  button = createButton('Find out now!');

  button.position(200, 200);

  //Print breed list when clicking the button

  button.mousePressed(printBreeds);

}

​

//A funtion that iterate through the list and print the strings

function printBreeds(){

  loadJSON('https://dog.ceo/api/breeds/image/random', getImage)

}

​

function getImage(json){

  data = json;

  loadImage(data.message, drawImage)

  console.log(data);

}

​

function drawImage(doggy){

  doggo = doggy;

}

​

function draw() {

  background(220);

  image(bg,0,0,500,950);

  //Text display

  textAlign(CENTER);

  textSize(18);

  text('Do you know what are the breeds of terrier dogs?', 250, 150);

   image(doggo, 200, 220);

}