javascript 조금 배우고 무작정 todolist 만들어보기

2021. 3. 9. 01:04

Todolist 만들어보기!

국비교육 41일차, 오늘까지 배운 HTML, CSS, Javascript로 todolist를 직접 만들어 보고 싶어서 기록으로 남긴다!

이 글을 읽는 분은 교육은 41동안 진행되었지만 프론트엔드 분야는 학습한지 2주 정도 되었기때문에 skillful 하지 않다는 점을 참고해주셨으면 한다.

기능

1. 체크박스에 할 일을 추가하면 한 줄씩 밑으로 추가가 되는것 (오늘(3월 8일자)수업으로 감 잡았음)
1-1 체크박스에 "할 일을 입력하세요" 띄워놓기 (안배웠음)
1-2 button키를 만들어 입력시키기(배움)
1-3 button을 통한 이벤트가 아닌 엔터키를 통해 추가하기(안배웠음)
2. 완료된 일정을 checkbox로 체크하면 가로줄이 생기는 것 (안배웠음)

1번 기능 구현하기

먼저 1-1과 1-3은 배우지 않았던 부분이기에 먼저 찾아봤음

1-1의 경우 placeholder를 이용하면 안내문구를 띄울수 있음
value로 초기값을 설정하지 않은 것은 이벤트 발생시키면 그대로 전해질까봐 하지 않음

1-3의 경우 onKeypress라는 속성을 통해 키보드 입력 이벤트를 제어한다
Enter의 아스키코드값은 13이기에
onKeypress = "javascript:if(event.keyCode==13){search_onclick_submit}"
이런식으로 하면 된다는데 복잡한것 같아서 다른거 다 하고 넣어볼까 생각중

--> html page안에 input이 한개면 '추가'버튼에 focus되어있으면 그냥 enter로 작동 됨

1번기능 html (여기서 추가적인 변경 없음)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myFirstTodo</title>
<script type="text/javascript" src ="app.js" defer></script>
</head>
<body>
    <div>
        <h3>Todo List</h3>
    </div>

    <div class="todoList">
        <input type = "text" name = "add" id = "todo" placeholder ="할 일을 입력하세요">
        <button id = "add">추가</button>
    </div>

    <div class = "todos">
        <ul id = lists>

        </ul>
    </div>
</body>
</html>

1번기능 JS (todolist add하기)

var button = document.getElementById("add");
var todo = document.getElementById("todo");
var lists = document.getElementById("lists");

button.addEventListener('click', addList);

function addList(){

    var temp = document.createElement('li');
    temp.innerHTML = todo.value;
    lists.appendChild(temp);
}
  • 오늘 배웠던 방법에서는 document.getElementById를 통해 위치를 잡고 value에 text를 중첩시키는 방법으로 리스트업을 했다.
  • 또한 무조건 onclick이나 기타 방식을 통해 html에서 event를 발생시켰지만 addEventListener 메소드를 통한 방법이 있다는 것을 알게 되었고
  • createElement와 appendChild를 통해 html코드를 추가시키는 방법을 알게 되었다
  • 나는 이제 html코드를 추가시키는 방법을 알게 되었으니 lists의 요소를 삽입할 때 checkbox도 함께 생성해보고자 한다.

2번기능 JS (checkbox만들기)

/**
 * 
 */
var button = document.getElementById("add");
var todo = document.getElementById("todo");
var lists = document.getElementById("lists");


button.addEventListener('click', addList);

function addList(){

    var temp = document.createElement('li');
    temp.innerHTML = '<input type="checkbox">';
    temp.innerHTML += todo.value;
    lists.appendChild(temp);

    todo.value = ""; /*입력이 완료되면 검색창 리셋*/

}

  • li를 만들때 input태그도 함께 삽입되게 만들어서 checkbox를 추가했다

  • 검색창에 입력이 완료되면 리셋이 되게끔 세팅도 했음

  • checked가 되었을 때 event를 넣고싶은데 검색을 해봐도 속시원한 답변을 못찾아서 다음에 넣기로 했다. --> 대부분 jquery를 통해 넣더라 나중에 배우면 해봐야지

  • 계획을 좀 틀어서 삭제 버튼을 todo에 그냥 집어넣기로 결정함

삭제버튼

var button = document.getElementById("add");
var todo = document.getElementById("todo");
var lists = document.getElementById("lists");
var count = 1;  /*삭제하려면 고유값 필요함*/

button.addEventListener('click', addList);

function addList(){

    var temp = document.createElement('li');
    temp.setAttribute("id", "li"+count); /*몇번째 리스트인지 라벨링 해주는것*/
    temp.innerHTML = '<input type="checkbox" >';
    temp.innerHTML += todo.value;
    temp.innerHTML += "<button onclick='remove("+count+")'>삭제</button>";
    lists.appendChild(temp);
    count++;
    todo.value = ""; /*입력이 완료되면 검색창 리셋*/

}

function remove(count){
    var li = document.getElementById('li' + count);
    lists.removeChild(li);
}
  • li를 삭제하기 위해서 어떤 li인지 알기 위해 setAttribute를 통해 라벨링을 해주었다.
  • count를 늘려가며 새로 생성된 li마다 라벨링을 해줌
  • removeChild라는 아주 편리한 삭제도구를 알게 되었음
  • li와 input이 inline형태로 되어있어서 input또 따로 remove해줘야하나 생각했지만 생성된 html을 보니 li 태그 자식으로 input태그가 형성되어서 그럴필요는 없었다.

여기까지 허접한 todolist만들기 실습이었다.

완성 이미지

 

 

++ 문자열 안에 변수 넣는 법을 찾아보니 백틱(`), 키보드숫자 1옆에 있는걸로 문자열을 감싸준 뒤 ${변수} 이런식으로 표현하면 된다고 하더라, 

 

즉

"<button onclick = 'remove("+count+")'>삭제</button>"

이런식으로 + 연산자로 문자열을 만들지 않고

 

`<button onclick='remove("${count}")'>삭제</button>`

이렇게 간단하게 만들수 있게 되었다.

'skill > 뭐든지 만들어보기' 카테고리의 다른 글

[Spring] slack webhook 사용해서 message 보내기(환경설정 및 활용)  (0) 2021.06.08
[JAVA] JSP/Servlet으로 카카오 로그인 구현하기  (0) 2021.04.17
[Javascript] 구매자정보를 받는사람정보에 복사하기(쇼핑몰 주문)  (0) 2021.03.09
[Javascript] todolist 구현 version.2  (0) 2021.03.09

+ Recent posts

티스토리툴바