Processing Final Project

인풋에 지역이름을 입력하면, 그 지역의 날씨(특징, 온도 등)를 보여준다.

• p5js 사용.
• 효율적인 코딩 방법들이 먹히지 않음. 따라서 최대한 포기하면서 코딩을 진행해야함.
• openWeatherMap API사용.

var weather, temperature, main;
var api ='http://api.openweathermap.org/data/2.5/weather?q=',
    apiKey ='&appid=87542d8bbf7e8a56f70c7a1eb26cc661',
    url;

//DOM
var input,button;

// 이벤트델리게이트 불가.
// var divControlPanel = document.getElementById("controlPanel");

// divControlPanel.addEventListener("click", function(e){
//   var target = e.target || e.srcElement;

//   if(target.id == "Seoul"){
//     place = target.id;
//   }else if(target.id == "London"){
//     place = target.id;
//   }else if(target.id == "Tokyo"){
//     place= target.id;
//   }else if(target.id == "Newyork"){
//     place = target.id;
//   }
//   event.stopPropagation();
// }, true);

function setup() {
  createCanvas(windowWidth,windowHeight);
  button = select('#submit');
  button.mousePressed(citychange);
  input = select('#city')

  function citychange(){
    url = api + input.value() + apiKey;
    loadJSON(url , gotData);
  }
}

function gotData(data){
  weather = data;
}

function draw() {
  background(0);

  if (weather){
    temperature = weather.main.temp;
    console.log(weather);
    //날씨가 한가지가 아닐수도 있다.
    //weather.weather.length
    main = weather.weather[0].main;
    console.log(main);

    if (main == "Rain"){
      background(200);
    }else if (main == "Drizzle"){
      background(230);
    }else if (main == "Clear"){
      background(255,255,0);
    }else if (main == "Thunderstorm"){
      background(180);
    }else if (main == "Snow"){
      background(255);
    }else if (main == "Clouds"){
      background(0,0,255);
    }
  }
}