프론트엔드 튜터링: To Do List 만들기

HTML

1. " "붙이고, 쉼표 지우기

<link rel="stylesheet" href="style.css" /> 

가 적용이 안되어서

<link rel="stylesheet" type="text/css" href="./style.css" >

로 바꿈
3. input text value를 placeholder로 바꿈

CSS

1. px->rem으로 수정
2. 전체에 적용: *{}안에 넣기

JS

1. lowerCamelCase: 첫 문자 소문자+다음 단어의 첫 문자는 대문자

2. After creating a new <li> you should call the strikeThrough() function again the add the eventlistener, so inside the createElement() function:

ul.appendChild(li);
input.value = "";
strikeThrough(li);

3. toggle, classlist 공부 -> 줄 그어지는 데 활용함

*선택자.classList.toggle('추가 혹은 삭제할 객체');

->class를 추가 혹은 삭제할 때 사용(추가되어있는 경우에는 삭제, 삭제되어있는 경우에는 추가)
->add+remove를 동시사용 가능하다

++++

strikeThrough(li);

delete button 구현할 때 넣어야함: 함수 실행을 해야함

4. <수정 전 코드>

document.getElementById("deleteButton").onclick = function cross() {
  var str = getElementById("li");
  var result = str.strike();
  str.replace = result;
};

<오류>
1. "deleteButton"이 document에 저장되어있지 않음(처음 실행할 때부터 있어야함)
2. li의 value는 string이 아니어서 .strike를 사용하지 못함

<수정한 코드>

deleteButton.onclick = function cross() {
    var str = document.getElementById("li");
    str.style.textDecoration = "line-through";
  };

5. console.log로 디버깅&크롬 개발자 도구 사용하기

출처: https://blog.naver.com/dpqmstnqlsdl/221910895991

참고:
https://stackoverflow.com/questions/60929824/javascript-strikethrough
https://blog.naver.com/wldks79/222204458644
https://blog.naver.com/nettycherry/222192915808

생각해 볼 질문

1. DOM은 무엇이고, DOM 조작은 어떻게 하는 것일까요?

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

2. 변수명은 어떻게 짓는 것이 좋을까요?

어떤 역할을 하는지 알아보기 쉽게

3. git commit 단위를 기능별로 쪼개는 이유는 무엇일까요?

리뷰/협업할 때 더 효율적으로 진행하기 위해서

4. 코드 포매터를 사용하는 이유는 무엇일까요?

오타 오류를 잡고, 다른 사람들이 쉽게 읽을 수 있도록

궁금한 점

1. 어디까지 html로 구현하고 어디까지 js로 구현하는지
2. 어떤 경우에 padding과 margin으로 구현하는지, 혹은 %로 구현하는지

더 구현하고 싶은 기능

1. drag&drop으로 순서 바꾸기