오늘은 간단하게 JavaScript로 ToDoList를 만들어 보았다.
일단 간단하게 UI 부터 구현하였다.
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가 추가되도록 기능을 추가하였다.
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 초기화
}
})
https://github.com/jys9049/JavaScript-ToDoList/blob/main/src/style.css
간단하게 만들어 봤는데 JavaScript 코드들이 뭔가 너무 정리가 안되어있는거 같다....