let apiKey = '&api-key=5lDCd7EWuNA01JT36IA4AIsZ5s2q5L9V';

let tp;

let em;

let input;

​

​

function preload() {

  tp = loadImage('TP.png');

  em = loadImage('EM.png');

}

​

function setup() {

  createCanvas(windowWidth, 400);

  let button = select ('#search');

  button.mousePressed(NYTimes);

  input = select ('.words');

    let inputbox = 

    document.getElementsByClassName('words')[0].addEventListener("keyup", function(event) {

    if (event.keyCode === ENTER) {

      event.preventDefault();

      NYTimes();

    }

  });

}

​

function draw() {

  earthMasked(width/2 -150, height/4 -50);

  noStroke();

  fill(250, 0, 0);

  ellipse(width/2 -225, height/4 +10, 100, 100);

  ellipse(width/2 +225, height/4 +10, 100, 100);

  ellipse(width/2 -225, height/4 *3 +10, 100, 100);

  ellipse(width/2 +225, height/4 *3 +10, 100, 100);

  fill(0);

  ellipse(width/2 -225, height/4 +10, 80, 80);

  ellipse(width/2 +225, height/4 +10, 80, 80);

  ellipse(width/2 -225, height/4 *3 +10, 80, 80);

  ellipse(width/2 +225, height/4 *3 +10, 80, 80);

  toiletPaper(width/2 -280, height/4 -50);

  toiletPaper(width/2 +170, height/4 -50);

  toiletPaper(width/2 -280, height/4 *3 -50);

  toiletPaper(width/2 +170, height/4 *3 -50);

  stroke(250, 0, 0);

  strokeWeight(12);

  line(width/2 -200, height/4 -20, width/2 -250, height/4 +40);

  line(width/2 +250, height/4 -20, width/2 +200, height/4 +40);

  line(width/2 +250, height/4 *3 -20, width/2 +200, height/4 *3 +40);

  line(width/2 -200, height/4 *3 -20, width/2 -250, height/4 *3 +40);

}

​

function windowResized() {

  resizeCanvas(windowWidth, 400);

}

​

function gotData(data) {

  let articles = data.response.docs;

  for (let i = 0; i < articles.length; i++) {

    createElement('h1', articles[i].headline.main);

    createP(articles[i].snippet);

  }

  // print(data.response.docs[4].headline.main);

} 

​

function NYTimes() {

let url = api + input.value() + apiKey;

  let p = selectAll("p");

  let h1 = selectAll("h1");

  p.forEach(function(e) {if(e != null) e.remove(); });

  h1.forEach(function(e) {if(e != null) e.remove(); });

  loadJSON(url, gotData);

}

​

function toiletPaper(x, y) {

  image(tp, x , y, 120, 120);

}

​

function earthMasked(x, y) {

  image(em, x , y, 300, 300);

}

​

​

//Thanks Coding Train 

//APIs - https://www.youtube.com/watch?v=IMne3LY4bks

//API Query - https://www.youtube.com/watch?v=4UoUqnjUC2c

​

//and the NY Times!

//https://developer.nytimes.com