티스토리 뷰

개발냥이/자바스크립트(Javascript)

JavaScript_weather

데브캣_DevCat 2022. 7. 15. 16:30 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./CSS/style.css">
    <title>Momentum App</title>
  </head>
  <body>
    <form class="hidden" id="login-form">
      <input required maxlength="15" type="text" placeholder="what is your name?"></input>
      <input type="submit" value="Log In"></input>
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 id="greeting" class="hidden"></h1>
    <form id="todo-form">
      <input type="text" placeholder="Write a To Do and Press Enter">
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
      <span></span>
      <span></span>
    </div>
    <div id="weather">
      <span></span>
      <span></span>
    </div>
    <script src="./JS/greeings.js"></script>
    <script src="./JS/clock.js"></script>
    <script src="./JS/quote.js"></script>
    <script src="./JS/background.js"></script>
    <script src="./JS/todo.js"></script>
    <script src="./JS/weather.js"></script>
  </body>
</html>
const API_KEY = "a68e52d278c75a27763b4b4442bdeb54";

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  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");
      weather.innerText = `${data.weather[0].main} / 온도: ${data.main.temp}`;
      city.innerText = data.name;
    });
}

function onGeoError() {
  alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
반응형

'개발냥이 > 자바스크립트(Javascript)' 카테고리의 다른 글

Ajax 입문  (0) 2022.07.25
Jquery 입문  (0) 2022.07.25
JavaScript_ToDoList  (0) 2022.07.15
JavaScript_응용  (0) 2022.07.12
JavaScript_querySelector & event  (0) 2022.07.12
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함