익명의 개발노트

간단한 ToDoList 만들기 본문

프로그래밍/뭔가 해보기

간단한 ToDoList 만들기

캡틴.JS 2019. 3. 29. 10:54
반응형

입력하면 아래에 달리는 꼭 댓글같은.. 아마 댓글도 하는 방법은 비슷 할 것 같다.

1. 입력창에 글쓰면 입력창은 초기화하기

2. 입력된 글은 입력창 밑에 나타나기

3. 삭제하기.

 

 

1. HTML 먼저 만들고. 

<body>

<div class= "form">

<input id="input" type="text"/>

<button class="input-submit" id='input-submit-01'>제출하다.</button>

<ul id='list'>

</ul>

</div>

<script src ="index.js"></script>

</body>

2. JS를 작성해보자. 

 

   1) 버튼이벤트 기능부여 + 입력창에 글쓰면 초기화 하기.

const button = document.querySelector('button'); // HTML 제출버튼
const elInput = document.querySelector('#input'); //HTML input
const elUl = document.querySelector('#list');  //HTML UL

function handleClick(){
    const currentVal = elInput.value;
    paintTodo(currentVal);
    elInput.value =''; //값 넣고 제출했을때 공백으로 보이게.    
}

button.onclick = handleClick;

   2) 글입력시 입력된 글 나타나기(방법은 무지 다양하지만 나는 span을 사용한다.

function paintTodo(text){
  const elLi = document.createElement("li");    
  const delBtn = document.createElement('button');
  delBtn.innerText = 'x';    
  const span = document.createElement("span");
  span.innerText = text +" "; //버튼하고 마지막글씨 사이때문에 공백넣음
  elLi.appendChild(span);   //li에 글씨  
  elLi.appendChild(delBtn);  //li에 버튼
  elUl.appendChild(elLi);  //ul에 li붙여주기

  delBtn.addEventListener("click", deleteTodo); //삭제버튼   
}

   3) 삭제하기  

function deleteTodo(){    
    const btn = event.target;   //클릭하는  li 엘리먼트를 나타낸다.
    const li = btn.parentNode;  //console.dir(btn)으로 확인해보면 부모노드가 li로 나타남.
    elUl.removeChild(li); //ul에 li달려있으니 삭제.
}

 

<총평>

삽질을 조금했다. 배운점은 워낙 이벤트나 dom에 딸려있는 옵션들이 많아서 궁금하면 console.dir()을 활용해 찾는법,

삭제부분에서 삽질을 했는데, 기존 handleclick부분 안에다가 삭제를 만들어버리니...

하나만 삭제되고 멈추는 현상발생.(제출클릭 -> li생성 -> 삭제 -> 메서드 끝.  따라서, 2번삭제 안됨).

해결방법은 밖에다가 메서드 만들어 줌. 모듈화가 이래서 중요하다는 것을 깨우침.

이번에 만드는 기능은 3가지. 1. 입력 후 초기화, 2. 입력된 글 나타내기. 3. 삭제하기.

만든 모듈도 3가지.

스바라시네~

여튼 만드는 방법은 다양하니 다양하게 한번 해봅시다.

 

<추가기능>

 

1. 엔터를 쳐도 반응하게 하고 싶다.

elInput.onchange = handleClick;

onclick에서 onchange로 변경하면 엔터를 쳐도 되고, 클릭으로해도 반응함.

 

mdn onchange를 보면 값이 변경되었을 때 사용한다 되어있음.

 

2. TodoList의 최신값이 맨 위로 오게하고 싶다.

elUl.prepend(elLi);

appendChild의 반대기능인 prepend를 이용하면 된다.

 

반응형

'프로그래밍 > 뭔가 해보기' 카테고리의 다른 글

포스기 만들기.  (0) 2019.04.12
자바로 만들었던 게임.  (4) 2019.04.05
댓글 달기 Part 3  (0) 2019.04.05
댓글달기 Part2  (0) 2019.04.03
댓글달기 part1  (1) 2019.03.29
'프로그래밍/뭔가 해보기' Related Articles more
Comments