sukso96100 · March 28, 2018 01:30
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Air Quality Display</title>
    <style>
      .aqiview, #keyword{
        align-content: center;
        text-align: center;
      }

      #aqi{
        font-size: 20em;
        margin: 0;
      }
      #desc, #keyword, .small{
        font-size: 8em;
        margin: 0;
      }

      #keyword{
        background: none;
        color: white;
      }

      body{
        background-color: black;
        color: white;
      }
    </style>
  </head>
  <body id="body" onload="showUsage()">
    <div class="setup" id="setupdiv">
      <input type="text" id="googleapi" placeholder="Google API Key">
      <input type="text" id="aqicnapi" placeholder="AQICN.org API Token">
      <button id="setup">OK</button>
    </div>
    <div class="aqiview">
      <input type="text" id="keyword" placeholder="장소 이름 입력+Enter">
      <p class="small">미세먼지 농도(AQI지수)</p>
      <p id="aqi">000</p>
    </div>
    <script>
      function showUsage(){
        alert("사용법\n1. https://console.developers.google.com/apis/credentials 에서 Google API Key 발급\n\
        2. http://aqicn.org/api/ 에서 AQICN API Key 발급\n\
        3. 발급한 두 키를 좌측 상단 입력칸에 입력 후 바로 우측에 위치한 'OK' 클릭\n\
        4. 중앙 상단에 위치한 '장소 이름 입력+Enter' 에 공기 질 정보를 얻을 장소 이름 입력 후 'Enter'키 누름\n\
        5. 실시간으로 해당 장소 정보가 화면에 나타납니다.");
      }
      function getLevelForAqi(aqi){
        if(aqi<=50) return {desc:"좋음", color:"#00a733"}
        else if(aqi>=51&&aqi<=100) return {desc:"보통", color:"#afb300"}
        else if(aqi>=101&&aqi<=150) return {desc:"민감군영향", color:"#ffa800"}
        else if(aqi>=151&&aqi<=200) return {desc:"나쁨", color:"#ff5c00"}
        else if(aqi>=201&&aqi<=300) return {desc:"매우나쁨", color:"#ff0000"}
        else return "위험"
      }

      let setup = document.getElementById("setup");
      let lat, lng, google, aqicn;
      let currentAqi=70, currentAqiDesc={desc:"보통", color:"#afb300"};
      let isAqiNum = true;
      setup.addEventListener("click", (event)=>{
        document.getElementById("setupdiv").hidden = true;
        google = document.getElementById("googleapi").value;
        aqicn = document.getElementById("aqicnapi").value;
      });

      let input = document.getElementById("keyword");
      input.addEventListener("change", (event)=>{
        // console.log(`https://maps.googleapis.com/maps/api/geocode/json?key=${google}&address=${input.value}`);
        fetch(`https://maps.googleapis.com/maps/api/geocode/json?key=${google}&address=${input.value}`)
          .then((res)=>{
            return res.json();
          })
          .then((json)=>{
            let geodata = json.results[0];
            lat = geodata.geometry.location.lat;
            lng = geodata.geometry.location.lng;
            return fetch(`https://api.waqi.info/feed/geo:${geodata.geometry.location.lat};${geodata.geometry.location.lng}/?token=${aqicn}`)
          })
          .then((res)=>{
            return res.json();
          })
          .then((json)=>{
            let descdata = getLevelForAqi(json.data.aqi);
            currentAqi=json.data.aqi;
            currentAqiDesc=descdata;
            setInterval(()=>{
              fetch(`https://api.waqi.info/feed/geo:${lat};${lng}/?token=${aqicn}`)
              .then((res)=>{
                return res.json();
              })
              .then((json)=>{
                let descdata = getLevelForAqi(json.data.aqi);
                currentAqi=json.data.aqi;
                currentAqiDesc=descdata;
                console.log("updated!");
              });
            }, 10000);
          });
      });

      setInterval(()=>{
        document.getElementById("body").style.backgroundColor = currentAqiDesc.color;
        if(isAqiNum){
          document.getElementById("aqi").innerHTML = currentAqi;
        }else{
          document.getElementById("aqi").innerHTML = currentAqiDesc.desc;
        }
        isAqiNum = !isAqiNum;
      }, 2000);
    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Air Quality Display</title>
	<style>
	.aqiview, #keyword{
	align-content: center;
	text-align: center;
	}

	#aqi{
	font-size: 20em;
	margin: 0;
	}
	#desc, #keyword, .small{
	font-size: 8em;
	margin: 0;
	}

	#keyword{
	background: none;
	color: white;
	}

	body{
	background-color: black;
	color: white;
	}
	</style>
	</head>
	<body id="body" onload="showUsage()">
	<div class="setup" id="setupdiv">
	<input type="text" id="googleapi" placeholder="Google API Key">
	<input type="text" id="aqicnapi" placeholder="AQICN.org API Token">
	<button id="setup">OK</button>
	</div>
	<div class="aqiview">
	<input type="text" id="keyword" placeholder="장소 이름 입력+Enter">
	<p class="small">미세먼지 농도(AQI지수)</p>
	<p id="aqi">000</p>
	</div>
	<script>
	function showUsage(){
	alert("사용법\n1. https://console.developers.google.com/apis/credentials 에서 Google API Key 발급\n\
	2. http://aqicn.org/api/ 에서 AQICN API Key 발급\n\
	3. 발급한 두 키를 좌측 상단 입력칸에 입력 후 바로 우측에 위치한 'OK' 클릭\n\
	4. 중앙 상단에 위치한 '장소 이름 입력+Enter' 에 공기 질 정보를 얻을 장소 이름 입력 후 'Enter'키 누름\n\
	5. 실시간으로 해당 장소 정보가 화면에 나타납니다.");
	}
	function getLevelForAqi(aqi){
	if(aqi<=50) return {desc:"좋음", color:"#00a733"}
	else if(aqi>=51&&aqi<=100) return {desc:"보통", color:"#afb300"}
	else if(aqi>=101&&aqi<=150) return {desc:"민감군영향", color:"#ffa800"}
	else if(aqi>=151&&aqi<=200) return {desc:"나쁨", color:"#ff5c00"}
	else if(aqi>=201&&aqi<=300) return {desc:"매우나쁨", color:"#ff0000"}
	else return "위험"
	}

	let setup = document.getElementById("setup");
	let lat, lng, google, aqicn;
	let currentAqi=70, currentAqiDesc={desc:"보통", color:"#afb300"};
	let isAqiNum = true;
	setup.addEventListener("click", (event)=>{
	document.getElementById("setupdiv").hidden = true;
	google = document.getElementById("googleapi").value;
	aqicn = document.getElementById("aqicnapi").value;
	});

	let input = document.getElementById("keyword");
	input.addEventListener("change", (event)=>{
	// console.log(`https://maps.googleapis.com/maps/api/geocode/json?key=${google}&address=${input.value}`);
	fetch(`https://maps.googleapis.com/maps/api/geocode/json?key=${google}&address=${input.value}`)
	.then((res)=>{
	return res.json();
	})
	.then((json)=>{
	let geodata = json.results[0];
	lat = geodata.geometry.location.lat;
	lng = geodata.geometry.location.lng;
	return fetch(`https://api.waqi.info/feed/geo:${geodata.geometry.location.lat};${geodata.geometry.location.lng}/?token=${aqicn}`)
	})
	.then((res)=>{
	return res.json();
	})
	.then((json)=>{
	let descdata = getLevelForAqi(json.data.aqi);
	currentAqi=json.data.aqi;
	currentAqiDesc=descdata;
	setInterval(()=>{
	fetch(`https://api.waqi.info/feed/geo:${lat};${lng}/?token=${aqicn}`)
	.then((res)=>{
	return res.json();
	})
	.then((json)=>{
	let descdata = getLevelForAqi(json.data.aqi);
	currentAqi=json.data.aqi;
	currentAqiDesc=descdata;
	console.log("updated!");
	});
	}, 10000);
	});
	});

	setInterval(()=>{
	document.getElementById("body").style.backgroundColor = currentAqiDesc.color;
	if(isAqiNum){
	document.getElementById("aqi").innerHTML = currentAqi;
	}else{
	document.getElementById("aqi").innerHTML = currentAqiDesc.desc;
	}
	isAqiNum = !isAqiNum;
	}, 2000);
	</script>
	</body>
	</html>