JS (3)

철웅·2022년 8월 18일

프론트엔드_스터디

목록 보기

6/6

🗓 To Do List

1. Form 만들고 값 저장하기

<!--html-->
<form id="todo-form">
      <input type="text" placeholder="Write a To Do and Press Enter" />
    </form>
    <ul id="todo-list"></ul>

// JS
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
// => const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event) {
  event.preventDefault(); // toDoForm 의 submit 기능(새로고침)을 막는다.
  const newTodo = toDoInput.value; // todo input의 값을 새로운 변수에 저장 후
  toDoInput.value = ""; // 다시 공백으로
  paintTodo(newTodo); // paintTodo에 보내기
}

function paintTodo(newTodo) {
  const li = document.createElement("li"); // createElement에는 ""
  const span = document.createElement("span"); // li에는 innerText 기능이 없기 때문에 span하나 만들기
  li.appendChild(span); // appendChild 에는 "" x
  span.innerText = newTodo;
  toDoList.appendChild(li);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

Input에 Text를 쓰고 submit할 때 마다 html element가 생성되는것을 확인할 수 있다.

2. Delete기능 추가

Delete Button 추가 , button은 click event를 기다리고 있어야 한다.

function deleteTodo(event) {
  const li = event.target.parentElement; // button의 부모인 li가 저장됨
  li.remove(); // const li 제거
}

function paintTodo(newTodo) {
  const li = document.createElement("li"); // createElement에는 ""
  const span = document.createElement("span"); // li에는 innerText 기능이 없기 때문에 span하나 만들기
  span.innerText = newTodo;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteTodo);
  li.appendChild(span); // appendChild 에는 "" x
  li.appendChild(button);
  toDoList.appendChild(li);
}

deleteTodo function은 click event의 정보를 받는다.
Target은 클릭된 HTML element!
어떤 버튼이 클릭되었는지 알기 위해 target property를 활용하였다.

3. Todos 저장하기

newTodo가 생성될 때마다 toDos array에 push 후 텍스트 값을 localStroage에 저장

const toDos = [];

 // handleToDosubmit에 추가
toDos.push(newTodo); 
saveToDos();

function saveToDos() {
  localStorage.setItem("todos", JSON.stringify(toDos));
}

JSON.stringify :JS Object나 array 또는 어떤 JS 코드건 간에 string으로 만들어준다.
이미지를 보면 Array의 모양으로 저장 되는것을확인 할 수 있다 (진짜 array는 아니고 srting)
Local Stroage는 Array는 못 받고 String만 저장 가능하기 때문에, 위에서는 추후 저장된 toDo를 불러오기 위해 JSON Stringify를 사용하여 모양을 array로 바꿔준 것!

4. ToDo Load 하기

새로고침하면 localStorage 에 있는 ToDo들이 사라진다
-> localStroage에 있는 값들을 추출해서 배열로 바꾼 후 배열의 원소에 각각 paintToDo함수를 적용시키자

JSON.parse()

const parsedToDos = JSON.parse(savedToDos);

string을 배열로 변환 (JS에서 사용가능한 object로)

foreach()

function sayHello(item) {
    console.log("this is the turn of ", item);
}
parsedToDos.forEach(sayHello);
--------------------------------
parsedToDos.forEach((item) => console.log("this is the turn of ", item));

JS는 array에 있는 각각의 item에 대해서 function을 실행할 수 있게 해준다
줄 기준 위, 아래 코드는 같다
아래 코드와 같은 방식을 Arrow Function이라고 한다.

ToDo들이 남긴 남는데 새로 추가한 것들만 남게된다.
-> toDos array가 항상 빈 값으로 시작하기 때문!
-> toDos array를 const에서 let으로 바꾸고 localStorage에 toDo들이 있으면 ToDo 안에 parsedTodo를 넣는다

let toDos = [];

const savedToDos = localStorage.getItem(TODOS_KEY); // 이전 ToDo 가져오기 (string)

if (savedToDos != null) {
  const parsedToDos = JSON.parse(savedToDos);   // 배열로 다시..
  toDos = parsedToDos;      // 이전 ToDo 들을 채워주기
  parsedToDos.forEach(paintTodo);   // 새로고침해도 LS에 남기기
}

5. LS 에서도 ToDo 지우기

delete 버튼으로 element를 지울 때 LS에서도 그 원소가 지워지게 해야한다.
-> object 타입을 활용하여 ToDo들에게 ID를 주자

Date.now()

밀리초(ms)를 주는 함수, id 값 부여로 활용

 const newTodoObj = {    // object type  
    text: newTodo,
    id: Date.now()
  };
  toDos.push(newTodoObj);
  paintTodo(newTodoObj);

후에 각 원소의 id 를 li element에 넘긴다

filter()

function deleteTodo(event) {
  const li = event.target.parentElement; // button의 부모인 li가 저장됨
  li.remove(); // const li 제거
  toDos = toDos.filter((toDo) => toDo.id != parseInt(li.id));
  saveToDos();
}

true를 반환하지 못하면 해당 object는 거른다.
toDo 위치에 아무 단어나 적어도 된다.

☀️ Weather

getCurrentPosition()

navigator.geolocation.getCurrentPosition(onGeoOK, onGeoError);

2개의 argument가 필요하다 : success 일 때 실행 될 함수, error가 났을 때 실행 될 함수
Success 함수는 GeolocationPosition object를 하나 입력 받는다. (User의 위치)

API 활용한 전체 코드

const API_KEY = "2669fa95f6aafa5e0e324b76025fc3be";

function onGeoOK(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&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");
      city.innerText = data.name;
      weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
    });
}
function onGeoError() {
  alert("can't find you.");
}

navigator.geolocation.getCurrentPosition(onGeoOK, onGeoError);