할 일To Do을 입력하면 그걸 저장할 수 있고
또 삭제할 수 있는 것을 만들어보았다
대부분 기존에 배웠던것들의 활용이라 복습하듯 들었다가
새로운 것을 배웠다
JSON.stringify()
요거는 어떤것이건 코드이건 array건 string으로 만들어준다.
function saveTodos(){
localStorage.setItem("To Dos", JSON.stringify(todos));
}
그리고 JSON.parse()는 다시 array로 만들어준다.
JSON은 어디서 많이 본것같은데 이에대해 앞으로 공부하면 재밌을것같다.
아무튼 입력하는대로 저장하고 또 그걸 삭제할 수 있게 만들었다
하지만 새로고침을 할때마다 날아가버리는 문제가 발생했다
여기서 let을 처음으로 실전에 사용했다
const가 아닌 let으로 변경하니 나중에도 그대로 보존되어있었다
그런데 또 넘어야 할 산이 있었다. 삭제를해도 로컬스토리지에는 남아있는것이었다.
따라서 텍스트를 저장할때 또 다른 랜덤값을 부여해서 특정을 해야한다.
강의에서는 Date.now()값을 각 입력값에 부여했다
그리고 이제는 해당하는 것을 삭제해야하는데
여기에 사용된 것은 .filter이다
필터는 forEach처럼 각각에 대해 실행하는데
다른점은 실행한 후 true가 아닌것을 뺀채 다시 array를 내어준다는 것이다.
이를 이용해 id값에 맞지 않는 것들을 빼내어 완성했다.
const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");
const toDoInfut = toDoForm.querySelector("input");
const TODOSKEY = "todos";
let todos = [];
function saveTodos(){
localStorage.setItem(TODOSKEY, JSON.stringify(todos));
}
function deleteToDo(event){
const li = event.target.parentElement;
todos = todos.filter(toDo => toDo.id !== parseInt(li.id));
saveTodos();
li.remove();
}
function paintToDo(newTodo){
const li = document.createElement("li");
li.id = newTodo.id
const span = document.createElement("span");
span.innerText = newTodo.text;
const button = document.createElement("button");
button.innerText = "✂";
button.addEventListener("click",deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleTodoSubmit(event){
event.preventDefault();
const newTodo = toDoInfut.value;
toDoInfut.value = "";
const newTodoObj = {
text:newTodo,
id:Date.now(),
}
todos.push(newTodoObj);
paintToDo(newTodoObj);
saveTodos();
}
toDoForm.addEventListener("submit", handleTodoSubmit);
const savedtodos = localStorage.getItem(TODOSKEY);
if(savedtodos !== null){
const parsedtodos = JSON.parse(savedtodos);
todos = parsedtodos;
parsedtodos.forEach(paintToDo);
}
function SexyFilter(){
}
날씨
날씨넣는것은 사실
처음 시작할때부터 정말 어려울것이라 예상했는데
생각보다 엄청 간단했다
API가 있었기때문이다
const API_KEY = "~~~"
function onGeoOK(position){
const lat = position.coords.latitude;
const lng = position.coords.longitude;
fetch(ZooSo).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 = `${data.weather[0].main} / ${data.main.temp}`
});
}
function onGeoNO(){
alert("정보를 찾을 수 없었습니다..");
}
navigator.geolocation.getCurrentPosition(onGeoOK,onGeoNO);
geolocation으로 내 위치정보를 받아서
api에 입력하고, 정보를 찾지못하면 안내메세지가 뜨게 했다
생각보다 정말간단!
+ 다시 이해해야 될 것들
foreach - array의 각 item 에 대해 기능을 실행한다.
자바는 event 정보처럼
어떤 item에 대한 정보도 제공한다
=> 화살표Arrow function
따로 적지않고 바로 실행하게해줌