전체 코드
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TodoList</title>
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/b0ffa0f2ec.js"
crossorigin="anonymous"
></script>
<script src="todo.js"></script>
</head>
<body>
<div class="todo_box">
<div id="header">TODOLIST</div>
<div class="input_box">
<input id="input_text" type="text" placeholder="오늘 할 일" />
<button type="button" id="add_btn" onclick="addTodo()">
<i class="fa-solid fa-plus"></i>
</button>
</div>
<ul class="todo_list"></ul>
</div>
</body>
</html>
전체 적인 뼈대 코드는 위 처럼 구성했다. 버튼의 아이콘은 font-awsome을 사용했다. 폰트는 구글폰트의 나눔 펜을 사용했다.
CSS
body {
background-color: black;
font-style: normal;
font-family: "Nanum Pen Script", cursive;
color: white;
max-width: 100%;
max-height: 100vh;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#header {
font-size: 200px;
}
.todo_box {
border-radius: 10px;
width: 800px;
display: flex;
flex-direction: column;
text-align: center;
}
input {
width: 800px;
height: 50px;
border-radius: 10px;
font-size: 30px;
text-align: center;
outline: none;
}
ul,
li {
list-style: none;
padding: 0;
font-size: 40px;
}
.input_box {
display: flex;
position: relative;
align-items: center;
}
#add_btn {
position: absolute;
right: 0;
width: 50px;
height: 50px;
border: none;
border-radius: 10px;
background-color: white;
cursor: pointer;
}
.todo_child {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.todo_child > p {
text-align: center;
}
.delete_btn {
position: absolute;
right: 0;
background-color: black;
color: white;
border-radius: 10px;
width: 50px;
height: 50px;
border: none;
cursor: pointer;
}Javascript
const addTodo = () => {
const todoList = document.querySelector(".todo_list");
const inputText = document.getElementById("input_text").value;
if (inputText === "") {
alert("오늘 할 일을 입력하세요.");
return;
}
const childList = document.createElement("li");
const childText = document.createElement("p");
childText.textContent = inputText;
childList.appendChild(childText);
childList.setAttribute("class", "todo_child");
const deleteBtn = document.createElement("button");
deleteBtn.setAttribute("class", "delete_btn");
deleteBtn.textContent = "X";
deleteBtn.addEventListener("click", () => deleteTodo(deleteBtn));
childList.appendChild(deleteBtn);
todoList.appendChild(childList);
document.getElementById("input_text").value = "";
};
const deleteTodo = (button) => {
const parentList = button.parentElement;
parentList.remove();
};
할 일 추가 버튼을 누르면 .todo_list라는 클래스를 가진 ul태그에 input태그의 value를 가져와 자식 요소로 넣어주었다. 동시에 삭제 기능을 가진 버튼을 만들어 주어 같이 자식 요소로 넣어 주었다.
deleteTodo()함수에는 현재 버튼을 인자로 넣어주어 현재 버튼의 부모 요소를 가져올 수 있도록 하고 remove()를 통해 생성한 li태그와 그 하위 요소들을 삭제하도록 했다.
이전에 만든 TodoList의 디자인이 너무 조잡해서 지우고 그냥 새로 하나 더 만들었다.
프론트가 하고싶어요