javascript day6

오늘은 할일을 입력하고 삭제하는 기능을 만들어볼 차례이다.

1단계 html에 있는 태그들을 변수에 담자.

const toDoForm = document.querySelector('#todo-form');
const toDoInput = document.querySelector('#todo-form input');

const toDoList = document.querySelector('#todo-list');

2단계 form의 새로고침 기능 멈추기

function handleForm(mike) {
	mike.preventDefault();
}

toDoForm.addEventListener('submit',handleForm);

3단계 입력받은 값 배열에 저장하고 그것을 보여주기

let myDoArr = [];

function handleForm(mike) {
	mike.preventDefault();
  	const myValue = toDoInput.value;
  	myValue= '';
  	const myListEle = {
    	id : Date.now();
      	text : myValue;      
    };
  	myDoArr.push(myListEle);
  	saveLocal();
}

4단계 배열에 저장된 내용 localstorage에 저장하기

local영역에 배열을 저장할 수 있을까??? 정답은 '아니요'이다.
그렇다면 어떻게 해야할까??? 해당 배열을 다른 형태로 바꿔서 저장해야한다. 이때 사용하는 메소드가 stringify이다.

function saveLocal() {
  localstorage.setItem('myStuff',JSON.stringify(myDoArr));
}

5단계 저장된 할일 list형태로 html에 출력시키기

function showMyDo (myValue) {
	const li = document.createElement('li');
  	li.id = myValue.id;
  	const span = document.createElement('span');
  	span.innerText = myValue.text;
  	const button = document.createElement('button');
  	button.innerText = '❌';
  	
  	// button이 눌리면 동작하도록 하기
 	button.addEventListener('click', DeletelLi);
  	li.appendchild('span');
  	li.appendchild('button');
  	toDoList.appendchild('li');
}

6단계 : 할일 삭제를 위한 버튼 만들기

function deleteLi(event) {
	const li = event.target.parentElement;
  	li,remove();
  	myDoArr = myDoArr.filter(toDo => toDo.id !== parseInt(li.id));
  	saveLocal()
}

7단계 : 해당 배열들이 화면에 하나씩 보일 수 있도록 해보자.

const savedToDos = localStorage.getItem(myStuff);

if (savedToDos !== null) {
	const parsedToDo = JSON.parse(savedToDos);
  	myDoArr = parsedToDo;
  	parsedToDo.foreach(showMyDo);
}