let unitsInput;

let unit;

​

let button;

let domain = "https://api.openweathermap.org/data/2.5/weather?q=";

​

let city;

let temp;

let weather;

let appid = "ENTER_YOUR_API_KEY";

​

function setup() {

  createCanvas(800, 600);

​

  cityInput = createInput("enter city here");

​

  unitsInput = createSelect();

  unitsInput.option("-Choose Units-");

  unitsInput.option("metric");

  unitsInput.option("imperial");

​

  button = createButton("GET WEATHER");

  button.mousePressed(getWeatherData);

​

  textSize(30);

}

​

function getWeatherData() {

  // let data = loadJSON(url, gotData, function (error) {

  //   console.log(error);

  // });

  let citysearch = cityInput.value();

  let unitSelect = unitsInput.value();

  if (unitSelect == "metric") {

    unit = "°C";

  }

  if (unitSelect == "imperial") {

    unit = "°F";

  }

​

  let url = domain + citysearch + appid + "&units=" + unitSelect;

  console.log(url);

  loadJSON(url, gotData, err);

}

​

function gotData(data) {

  console.log("Success");

​

  weather = data;

  city = weather.name;

  temp = weather.main.temp;

​

  //console.log(weather);

}

​

function err(error) {

  console.log("error");

  console.log(error);

}

​

function draw() {

  background(220);

​

  if (weather) {

    text("The weather in: " + city + " is: " + temp + " " + unit, 10, 200);

  }

}

​