​

//query String

let url = "https://api.openweathermap.org/data/2.5/forecast?q=";

​

// our search term

let city = " ";

​

let units = "&units=imperial&";

​

// our api key plus units, input your own API key below, leave no spaces

let apiKey = "appid=" + "ADD YOUR API KEY HERE";

​

//variable to eventually hold all our weather data

let weather;

​

let input;

​

let button;

let cities;

​

let loaded = false;

​

let cityText = "";

​

function setup() {

  cities = createSelect();

  cities.option("-- Chose a city --");

  cities.option("London");

  cities.option("Dublin");

  cities.option("Anchorage");

  cities.option("Quito");

  cities.option("Moscow");

  cities.option("Buffalo");

  cities.option("New York City");

​

  button = createButton("submit");

  button.mousePressed(userWeather);

  cities.changed(chooseCity);

  createCanvas(windowWidth, windowHeight);

  textSize(24);

}

​

function userWeather() {

  let request = url + city + units + apiKey;

​

  console.log(request);

​

  loadJSON(request, gotData, function (er) {

    console.log(er);

  });

}

​

function gotData(d) {

  weather = d;

  //console.log(d);

  if (d) {

    loaded = true;

  }

}

​

function chooseCity() {

  if (cities.value() !== "-- Chose a city --") {

    city = cities.value();

  }

}

​

function draw() {

  background(0);

  fill(255);

  //console.log(loaded);

  if (loaded) {

    text("The Forecast For " + weather.city.name, 10, 50);

​

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

      text(weather.list[i].dt_txt, 0, 100 + i * 60);

      //text("Temp F: " + weather.list[i].main.temp, 100, 130 + i * 60);

      text("Temp F: " + weather.list[i].main.temp, 200, 130 + i * 60);

    }

  }

}

​

​