사전캠프 데일리미션 - 할 일 목록(To Do List) 만들기
요구사항
- 할 일을 추가 할 수 있는 투두 리스트를 만듭니다.
- HTML로 기본 구조를 만듭니다.
- 자바스크립트로 할 일 추가 기능을 구현합니다.
- 입력 필드와 “추가” 버튼을 통해 새로운 할 일을 추가합니다.
- (선택 사항) CSS로 간단한 스타일을 적용합니다.
- (선택 사항) 할 일 항목의 완료 표시, 삭제 기능을 구현합니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>간단한 투두 리스트</title>
</head>
<body>
<div class="wrap">
<div class="todo-container">
<h1>투두 리스트</h1>
<div class="add-todo-container">
<input type="text" id="todo-input" placeholder="할 일을 입력하세요">
<button id="add-todo"><b>추가</b></button>
</div>
<ul id="todo-list">
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
}
button {
cursor: pointer;
}
li {
list-style-type: none;
list-style: none;
}
.wrap {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #F4F4F4;
}
.todo-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
background-color: white;
gap: 30px;
}
.add-todo-container {
display: flex;
gap: 20px;
}
.add-todo-container > input {
padding: 10px;
}
.add-todo-container > button {
padding: 10px;
}
#todo-list {
width: 100%;
}
#todo-list > li {
border-bottom: 1px solid black;
font-size: 1.2rem;
font-weight: bold;
padding: 10px;
cursor: pointer;
}
.done-list {
text-decoration: line-through;
color: gray;
}
퍼블리싱은 사진대로 했다.
const addTodo = () => {
if (input.value === "") {
alert("할 일을 입력해주세요.");
} else {
const li = document.createElement("li");
const span = document.createElement("span");
const removebtn = document.createElement("button");
li.addEventListener("click", () => {
span.classList.toggle("done-list");
});
span.textContent = input.value;
removebtn.textContent = "X";
li.appendChild(span);
li.appendChild(removebtn);
removebtn.addEventListener("click", () => {
document.getElementById("todo-list").removeChild(li);
});
document.getElementById("todo-list").appendChild(li);
input.value = "";
}
};todolist 추가 버튼에 onclick 이벤트로 준 함수 코드
li.addEventListener("click", () => {
li.classList.toggle("done-list");
});위의 코드는 li태그로 todolist를 추가할 때 onclick이벤트로 done-list라는 클래스를 주는 코드이다. toggle로 요구사항 5번의 할 일 항목의 완료 표시 기능을 대체하도록 만들었다.
span.textContent = input.value;
removebtn.textContent = "X";
li.appendChild(span);
li.appendChild(removebtn);
removebtn.addEventListener("click", () => {
document.getElementById("todo-list").removeChild(li);
});요구사항 5번인 할 일 항목의 삭제 기능을 만든 코드
Javascript 최종코드
const input = document.querySelector("#todo-input");
const addbtn = document.querySelector("#add-todo");
const list = document.querySelectorAll("#todo-list > li");
const addTodo = () => {
if (input.value === "") {
alert("할 일을 입력해주세요.");
} else {
const li = document.createElement("li");
const span = document.createElement("span");
const removebtn = document.createElement("button");
li.addEventListener("click", () => {
span.classList.toggle("done-list");
});
span.textContent = input.value;
removebtn.textContent = "X";
li.appendChild(span);
li.appendChild(removebtn);
removebtn.addEventListener("click", () => {
document.getElementById("todo-list").removeChild(li);
});
document.getElementById("todo-list").appendChild(li);
input.value = "";
}
};
addbtn.addEventListener("click", addTodo);
input.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
addTodo();
}
});
JSX문법만 쓰다가 막상 바닐라js로 구현을 하려니까 자바스크립트 문법에 대해 부족하고 햇갈리는 부분이 많았다. 이번 todolist를 만들며 js문법들을 더 명확히 아는 계기가 되어 좋았던 것 같다.
응원합니다