[22.11.17] TIL +13

오늘 배운 것

html - fildset < legend 조합

<fieldset>
	<legend>이렇게 제목이 적혀요</legend>
</fieldset>

결과물

이렇게 제목이 적혀요

---

firebase

음......... 실시간 강의로 배우긴 했으나 아직 이해가 잘 되지 않는다.
이번 프로젝트에 무조건 사용해야 한다고 하니 사용하면서 배워보기로..

---

todolist

만들고 있는 todolist에 완료버튼을 클릭하면 완료된 목록으로 이동 및 완료버튼 text를 해제 로 변경하고 싶었다.
방법은 간단했다.

이전에 제출 버튼을 클릭하면, addTodo 라는 함수를 실행되게 했다.
addTodo는 이렇게 구성되어있다.

const addTodo = () => {
  if (text.value == '') {
    alert('할 일을 입력해주세요.');
  } else {
    // li 생성 변수
    const temp = document.createElement('li');

      temp.innerHTML = `
    <button class='cpbt' onClick='doneTodo(event)'>완료</button>
    <span>${text.value}</span>
    <button class='chbt'>수정</button>
    <button class='delbt'>삭제</button>
    `;

    list.appendChild(temp);
    text.value = ''; //리스트 생성 후 input 초기화
  }
};

템플릿리터럴로 완료버튼에 doneTodo 함수를 추가해줬다.

// 완료버튼 클릭하면 완료된 목록으로 이동
function doneTodo(event) {
  const endTodo = event.target.parentNode;
  // doneTodo -> 클릭했을 때 동작, 이벤트 발생하는 곳은 완료버튼.
  // donelist에 완료 -> 해제라는 버튼이름으로 변경
  endTodo.querySelector('.cpbt').innerText = '해제'
  doneList.appendChild(endTodo);
  // id donelist에 자식요소로 추가한다. (무엇을)
  // event가 일어난 target의 부모요소에. 
  // 여기서 event.target은 cpbt이므로 cpbt의 부모인 li를 뜻한다.
}

처음에는 event.target 이 뭘 향하는지 이해가 안됐었는데 콘솔에 찍어보면 되는거였다.
여기서 event.target.parentNode은 addTodo 함수에서 생성해준 li 였다.
세번째 라인을 해석해보자면, li에 있는 cpbt라는 클래스를 가진 요소에게 '해제'라는 문구로 text를 초기화해준다.
그리고 doneList(li의 부모요소인 ul이 doneList다.)의 자식으로 수정된 li를 추가해준다.

지금은 몇개 더 끄적여서 textcolor도 변경해주고, textDecoration으로 텍스트 중간에 "나 완료된거야!"라는 걸 뿜뿜 할 수 있게끔 줄도 그어줬다.
엄청 어렵지만 알면 알수록 재밌는 자바 스크립트..
오늘도 이거 한다고 12시 넘어서 잠든다 ㅋㅋㅋㅋ 내일부터는 프로젝트 시작이니 죽을각오 해야겠지
내일더 화이팅이당