밤양갱 js(wed)배움일지(2)

오늘은 전에 하던 입력창에 데이터 입력시 데이터가 자동으로 저장되고 삭제버튼 마무리단계와

날씨 온도 지역 만들기

 

function saveToDos(){
    localStorage.setItem("TODOS_KEY", JSON.stringify(toDos));
    //JSON.stringify() 자바스크립트의 값을JSON문자열로 변환
} //toDos가 여기에 저장

 

*삭제버튼을 눌렀을시에 button의 부모인 li와 같이 삭제되는 코드

HTML

<ul id="todo-list"></ul>

JS

function deleteToDo(event){
    const li = (event.target.parentElement);
    li.remove(); //button의 부모인 li를 삭제
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id)); 
    //li > id를 삭제함
    saveToDos();
    
}

li에 id를 부여하고 li가 생성될때마다 새로운id생성

const li = document.createElement("li"); //li만듬
    li.id = newTodo.id;
const span = document.createElement("span");//span만듬
    span.innerText = newTodo.text;
const button = document.createElement("button"); //html에 button만듬

 li.appendChild(span); //span을 li에 집어넣음(자식)
 li.appendChild(button); //button을 li에 집어넣음(자식)

paintToDo({text:"a", id:random}) 이렇게 텍스트와 랜덤한 아이디를  object에 저장시켜주는 코드이다

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
    //(item) => console.log("this is the turn", item)
    //function을 사용하지않고 간단히 사용가능한 방법
}
//sayHello("h"); 배열추가

 

날씨 표시하기 (날씨, 온도, 지역)

API-KEY를 API홈페이지에서 가져온다

const API_KEY = "19777beab672c364eabbcda6461de192";

 

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
//navigator 네비게이터 (브라우저에 대한 정보를 가지고있는 객체)
//geolocation.getCurrentPosition 장치의 현재위치를 가져옴

위치확인을 거절할시 문구를 표시해준다

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

HTML

<div id="weather"> <!-- 날씨데이터 -->
    <span></span>
    <span></span>
  </div>

JS

날씨데이터는 꼭 세 변수의 값이 있어야한다, API-key, lat, log 세 변수 데이터를 API사이트에서 가져오고

변수 데이터를 적용시켜준다 (${lat}, ${log}, ${API_KEY}) fetch(url)을 사용해 URL을 얻는다

weather 데이터와 city데이터를 받아온후 3가지(날씨, 온도, 위치)를 표시한다.

function onGeoOk(position){
    const lat = position.coords.latitude; //경도
    const log = position.coords.longitude; //위도
    console.log("You live it", lat ,log);
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${log}&appid=${API_KEY}&units=metric`; 
    fetch(url)
    .then((response) => response.json())
    .then((data) => {
            const weather = document.querySelector("#weather span:first-child") //첫번째 자식 span 출력
            const city = document.querySelector("#weather span:last-child") //마지막 span 출력
        city.innerText  = data.name;
        weather.innerText = `${data.weather[0].main} /${data.main.temp}` ; //현재 날씨데이터를 텍스트로 변환
    }); 
    //fetch 원격 API호출하기
}