TILJavascript

javascript-study-19[Todo 가벼운 실습 v0]

TIL, Todo, Web, coding, javascript

JavaScriptBanner

JavaScript Study 19

TODO DOM + 이벤트 가벼운 실습


코드 ▼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Todo list</title>
  <style>
    body{
      background: #7ca7c7;
      font-size: 20px;
    }

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    main {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
      flex:auto;
    }

    .input {
      width: 100vw;
      height: 40px;
      font-size: 20px;
      text-indent: 20px;
      border : none;
    }

    div {
      position: relative;
    }

    .addList {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 100%;
      font-size: 20px;
      color: white;
      border: none;
      background: black;

    }
    .remove {
      width: 30px;
      height: 20px;
      color: white;
      border: none;
      border-radius: 10px 10px 10px 10px;
      background: red;
    }
    .todos{

    }
    .todo {
      width: 40vw;
      display: flex;
      justify-content: space-between;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <main>
      <h1> Todo List </h1>
      <div>
        <input class="input" type="text" placeholder="할 일을 입력하세요.">
        <button class="addList">추가</button>
      </div>
      <ul class="todos"></ul>
  </main>
</body>
<script>
  const $input = document.querySelector('.input');
  const $addList = document.querySelector('.addList');
  const $todos = document.querySelector('.todos');
  let count = 0;

  function addInnerHtml() {
    $todos.innerHTML += `
    <li class="todo">
      <input type="checkbox" id='abc${count}'>
      <label for="abc${count}">
        ${$input.value}
      </label>
      <button class="remove">삭제</button>
    </li>`;
    $input.value = '';
    count++;
  }

  $addList.onclick = function () {
    if ($input.value) {
      addInnerHtml();
      $input.focus();
    }
  };

  $input.onkeydown = function (e) {
    if (($input.value) && e.keyCode === 13) {
      addInnerHtml();
    }
  };

  // onchage는 check 박스에서만 가능하다.
  $todos.onchange = function ({ target }) {
    console.log(target);
    const $todo = target.parentNode;
    console.log($todo);
    $todo.style.textDecoration = target.checked ? 'line-through' : 'none';
  };

  $todos.onclick = function (e) {
    if (e.target.classList.value === 'remove') {
      $todos.removeChild(e.target.parentNode);
    }
  };
</script>
</html>

구현 기능

  1. 할 일 추가 기능 $addList.onclick ~~ $todos.innerHTML += 내용

  2. 할 일 삭제 기능 $todos.removeChild(e.target.parentNode);

  3. 할 일 체크박스 혹은 글자 선택 시 밑줄 그어 지는 기능
    target.parent.style.textDecoration = target.checked ? 'line-through' : 'none';

  4. 인풋박스에 포커스 게속 유지 $input.focus();

  5. 키보드 엔터키로 추가 가능 $input.onkeydown ~~ $todos.innerHTML += 내용


결과 ▼

todo_test실습

Share