반응형
Javascript로 todo list를 만들어보려고 한다.
(추후 Vue.js로 변환)
먼저,
UI를 먼저 그려주겠습니다.
1️⃣ To do list 제목
2️⃣ input 리스트 추가 영역
3️⃣ 리스트 영역
input 텍스트 입력을 받아보겠습니다.
1️⃣ 빈칸으로 버튼 클릭 시 alert 띄우기
2️⃣ 입력창에 텍스트 입력 후 버튼 클릭 시 리스트에 추가하기
3️⃣ li 태그 추가 후에 input 창 비워주기
let textArea = document.querySelector("#textArea");
let addBtn = document.querySelector("#addTodo");
let todoList = document.querySelector(".todo-list");
addBtn.addEventListener("click", function () {
let item = document.createElement("li")
if (!textArea.value) {
alert("할일이 입력되지 않았습니다 !!")
} else {
item.innerHTML = textArea.value;
todoList.appendChild(list)
textArea.value = "";
}
})
Todo List의 기능을 구현하기 위해서
리스트를 한번 클릭 시에는 줄을 그어주고,
두 번 클릭 시에는 리스트를 삭제하는 기능을 추가하겠습니다.
1️⃣ 리스트 클릭 시에 줄 생성
2️⃣ 리스트 두번 클릭 시 리스트 삭제
+버튼 클릭 시에 생성되는 li는 따로 click 이벤트 생성하면 불러오지 못함.
버튼 안에서 생성 시에 item이 특정되니 click 이벤트 가능.
완성 코드
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
<link rel="stylesheet" href="./style/style.css" />
</head>
<body>
<h1>To do list</h1>
<div class="container">
<div class="todo-add">
<input type="text" id="textArea" />
<button type="button" id="addTodo">+</button>
</div>
<ul class="todo-list"></ul>
</div>
<script src="./js/common.js"></script>
</body>
</html>
<common.js>
let textArea = document.querySelector("#textArea");
let addBtn = document.querySelector("#addTodo");
let todoList = document.querySelector(".todo-list");
addBtn.addEventListener("click", function () {
let item = document.createElement("li")
if (!textArea.value) {
alert("할일이 입력되지 않았습니다 !!")
} else {
item.innerHTML = textArea.value;
todoList.appendChild(item)
textArea.value = "";
}
item.addEventListener("click", function () {
item.classList.add("__active")
})
item.addEventListener('dblclick', function () {
item.remove()
})
})
다음 번엔 더 심화된 Todo List를 구현해보겠습니다.
반응형
'스스로 하는 코딩' 카테고리의 다른 글
| 자바스크립트 이스케이프 시퀀스 (0) | 2023.01.26 |
|---|---|
| gulp 연결하기① (0) | 2022.12.28 |
| 스스로 하는 도메인 호스팅(VSCode) (0) | 2022.05.24 |
