Page 319 - MDP2022-3

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.search {
text-align: center;
width: 200px;
height: 100px;
}
.search input {
width: 250px;
height: 30px;
font-size: 18px;
border: 4px solid black;

}

.search button {
font-size: 18px;
font-family: 'Do Hyeon', sans-serif;
border: none;
background-color: black;
width: 70px;
height: 30px;

color: #fff;
cursor: pointer;
}

<js 코드>

weatherj.js

const API_KEY = "cde81704f4e085e83036ba802c8aaab0"; //API KEY
const COORDS = 'coords'; //좌표를 받을 변수

//DOM객체들
const weatherInfo = document.querySelector('.weatherInfo');
const weatherIconImg = document.querySelector('.weatherIcon');

//초기화
function init() {
askForCoords();
}

//좌표를 물어보는 함수
function askForCoords() {
navigator.geolocation.getCurrentPosition(handleSuccess, handleError);
}

//좌표를 얻는데 성공했을 때 쓰이는 함수
function handleSuccess(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,