바닐라 자바스크립트로 투두를 만들어보게 되었는데 날것 그대로는 너무 오랜만이라
헷갈리는 부분도 있었다...
결과물을 먼저 보여주자면 매우 심플하다.
완료한 일은 체크하면 취소선이 생기도록 하였고 각 항목마다 옆에있는 삭제버튼을 클릭하면 바로 사라지도록 하였다.
우선 index.html 파일부터 만들어 주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main>
<h2>Todo-List</h2>
<div class="inputWrap">
<input type="text" id="todoInput" />
<button id="addBtn">등록</button>
</div>
<ul id="todoList"></ul>
</main>
<script src="./src/main.js"></script>
</body>
</html>link태그로 css파일을 연결해주고 script태그로 js파일을 잘 연결했는지 확인
등록한 할일(li)은 js파일에서 생성해주기 위해 ul 태그만 넣어주었다.
다음으로 main.js 파일에 기능을 넣어주었다.
const todoInput = document.querySelector("#todoInput");
const addBtn = document.querySelector("#addBtn");
const todoList = document.querySelector("#todoList");
addBtn.addEventListener("click", function () {
const todoContent = todoInput.value.trim();
if (todoContent !== "") {
newTodo(todoContent);
todoInput.value = "";
}
});
function newTodo(todoContent) {
const todoItem = document.createElement("li");
const checkId = Date.now();
const template = `
<input type="checkbox" id=${checkId} />
<label for=${checkId}></label>
<p>${todoContent}</p>
<button class="deleteBtn">X</button>
`;
todoItem.innerHTML = template;
todoItem.addEventListener("click", function (e) {
const deleteTodo = e.target.parentNode;
if (e.target.classList.contains("deleteBtn")) this.remove(deleteTodo);
});
todoList.appendChild(todoItem);
}checkbox타입인 input을 커스텀해주기 위해 label태그를 추가하였다.
html에서 id를 부여해줬던 태그들은 document.querySelector를 이용하여 js파일로 가져왔다.
querySelector를 사용하였을 때 id는 앞에#을 꼭 붙여줘야 가져올 수 있다! class를 사용하였다면 앞에.을 붙여줘야한다.
trim() : 해당 메소드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환한다.
parentNode : 인터페이스의 읽기 전용 속성은 NodeDOM 트리에서 지정된 노드의 상위를 반환한다.
appendChild() : 해당 메소드는 지정된 Node상위 노드의 하위 목록 끝에 노드를 추가한다.
바닐라 자바스크립트를 사용하면서 헷갈렸던 메소드를 정리해보았다.
마지막으로 css작업을 해줬는데 중요한 부분만 언급해보려고 한다.
li {
display: flex;
align-items: center;
gap: 15px;
margin: 10px 0;
}
input[type="checkbox"] {
display: none;
}
label {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #4d4d4d;
position: relative;
}
input:checked + label::after {
content: "V";
position: absolute;
left: 20%;
transform: translate(-50% -50%);
}
input:checked ~ p {
text-decoration: line-through;
}기존 input의 체크박스 스타일은 보이지 않게 처리하고 label태그를 커스텀 해주었다.
그리고 체크박스를 클릭하여 체크해주었을때 V 체크표시가 보이면서 할일요소인 p태그에 line-through를 추가해주었다.
이렇게 되면 완성이다!
바닐라자바스크립트를 거의 사용하지 않고 있었다보니 정말...낯설었다...
