[바닐라JS로 크롬 앱 만들기] Getting the Weather part One Geolocation

JavaScript/Vanilla JS

[바닐라JS로 크롬 앱 만들기] Getting the Weather part One Geolocation

코딩하는 붕어 2021. 3. 3. 03:22

[출처-유튜브 노마드 코더 Nomad Coders]

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <div class="js-clock">
        <h1>00:00</h1>
    </div>
    <form class="js-form form">
        <input type="text" placeholder="What is your name?" />
    </form>
    <h4 class="js-greetings greetings"></h4>
    <form class="js-toDoForm">
        <input type="text" placeholder="Write a to do" />
    </form>
    <ul class="js-toDoList">
    </ul>
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
    <script src="todo.js"></script>
    <script src="bg.js"></script>
    <script src="weather.js"></script>
</body>
</html>

weather.js

const API_KEY = "f97c1ed1e4b50ed233ccabf8c1ea2011";
const COORDS = 'coords';

function saveCoords(coordsObj){
    localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}

function handleGeoSuccess(position){
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const coordsObj = {
        latitude,
        longitude
    };
    saveCoords(coordsObj);
}

function handleGeoError(){
    console.log("Cant access geo location");
}

function askForCoords(){
    navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError);
}

function loadCoords(){
    const loadedCords = localStorage.getItem(COORDS);
    if(loadedCords === null){
        askForCoords();
    } else {

    }
}

function init(){
}

init();

음.. 위치정보가 안 뜬다..

function askForCoords(){
    navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError);
}

이 코드가 동작을 안함..

저작자표시 (새창열림)