#7.6~7.8

Weather

//weather.js
const API_KEY = "44e31e73aec402baf02f60ad8b75e464";

function onGeoOk(position){
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  console.log("You Live in", lat, lon);
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
  fetch(url).then(response => response.json().then(data => {
    const weather =  document.querySelector("#weather span:first-child");
    const city = document.querySelector("#weather span:last-child");
    city.innerText = data.name;
    weather.innerText = `${Math.floor(data.main.temp)}°C ${data.weather[0].main}`;
  }));
}

function onGeoError(){
  alert("Can't find you. No weather for you.")
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

CSS

//style.css
#weather {
  position: fixed;
  top: 20px;
  right: 36px;
  color: white;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: right;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#weather span {
  display: block;
  margin-bottom: 5px;
}

#weather span:first-child {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

#weather span:last-child {
  font-size: 1.8rem;
  color: #ffce00;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}