JavaScript - ToDoList

정용성·2022년 8월 2일
0

JavaScript

목록 보기
2/2
post-thumbnail

To Do List

오늘은 간단하게 JavaScript로 ToDoList를 만들어 보았다.

일단 간단하게 UI 부터 구현하였다.

index.html

https://github.com/jys9049/JavaScript-ToDoList/blob/main/src/index.html


<div class="container">
    <h1 class="main-title">To Do List</h1>
    <input type="text" class="inputText" />
    <button type="button" class="addToDo"> + </button>
</div>

<div class="todos"></div>

[+] 버튼을 누르면 list가 추가되도록 기능을 추가하였다.

main.js

https://github.com/jys9049/JavaScript-ToDoList/blob/main/src/main.js


$addTodo.addEventListener('click', () => {

    let click_check = 0;

    if (!$inputText.value) {
      alert("내용을 입력해주세요!");
      //inputText에 내용이 없으면 alert 실행
    }
    else {
      const li = document.createElement('li');
      const span = document.createElement('span');
      const btnGroup = document.createElement('span');
      const check = document.createElement('button');
      const clear = document.createElement('button');

      span.innerText = $inputText.value;
      check.innerText = 'V';
      clear.innerText = 'X';

      li.classList.add('todos-item');
      btnGroup.classList.add('btn-group');

      li.appendChild(span);
      btnGroup.appendChild(check);
      btnGroup.appendChild(clear);
      li.appendChild(btnGroup);
      $todos.appendChild(li);

      check.addEventListener('click', () => {
        if (click_check == 0) {
          li.style.color = "red";
          click_check = 1;
        }
        else {
          li.style.color = "black";
          click_check = 0;
        }
        //check 클릭 시 색상 변경
      })

      clear.addEventListener('click', () => {
        li.remove();
        //clear 버튼 클릭 시 li 삭제
      })

      $inputText.value = '';
      // 위의 이벤트들이 실행되고 inputText Value 초기화
    }
  })

CSS

https://github.com/jys9049/JavaScript-ToDoList/blob/main/src/style.css

실행 화면

간단하게 만들어 봤는데 JavaScript 코드들이 뭔가 너무 정리가 안되어있는거 같다....

profile
코딩너무어려워

0개의 댓글