2025 / 02 / 10
오늘 수업시간에는 지금까지 배운 내용을 바탕으로 to-do-list를 만들었습니다.
일단 오늘은 리스트의 생성과 추가 그리고 수정 및 삭제 버튼의 구현까지 하였습니다.
하면서 수정 버튼을 구현하는데 에러가 많이 나서 힘들었지만.. 그래도 작성해보겠습니다.
💌 TO-DO-LIST
투두리스트 만들기(CSS 꾸미기 제외)
- HTML 구조를 작성합니다.
- CSS로 ul의 기본 CSS를 조정해줍니다.
- Input에 입력한 값을 추가하는 버튼의 기능을 구현합니다.
- 리스트의 수정 버튼의 기능을 구현합니다.
- 리스트의 삭제 버튼의 기능을 구현합니다.
- 자바스크립트로 리스트들의 기본적인 간격을 조정합니다.
1) HTML 구조 작성
HTML 구조를 작성합니다.
- input으로 사용자가 할 일을 입력할 수 있는 텍스트 입력 창을 만듭니다.
- 입력한 할 일이 목록에 추가되게 할 버튼을 생성합니다.
- 할 일 목록을 표시할 ul 태그를 만들어줍니다.
<input type="text" id="text_input" />
<button class="add_btn" onclick="todo_btn()">추가</button>
<ul></ul>2) ul 조정
CSS로 ul의 기본 CSS를 조정해줍니다.
margin: 10px;은 목록의 외부 여백을 10px로 설정합니다.padding: 0;은 목록의 내부 여백을 없앱니다.ist-style: none;은 목록 앞에 기본적으로 표시되는 점을 없앱니다.
ul {
margin: 10px;
padding: 0;
list-style: none;
}3) 추가 버튼 기능
Input에 입력한 값을 추가하는 버튼의 기능을 구현합니다.
- 사용자가 텍스트 입력 창에 입력한 값을 가져옵니다.
- 새로운
<li>태그를 만들고, 체크박스와 텍스트를 그 안에 넣습니다.- 입력된 값이 추가된 후, 입력창은 비워집니다.
- 이 새로운
<li>태그는 ul 목록에 추가됩니다.
function todo_btn() {
let input = document.getElementById("text_input"); // 텍스트 입력 창 가져오기
let newLi = document.createElement("li"); // 새로운 <li> 태그 생성
let check = document.createElement("input"); // 체크박스 생성
check.type = "checkbox"; // 체크박스로 설정
let text = document.createTextNode(input.value); // 입력된 텍스트
newLi.appendChild(check); // 체크박스를 <li>에 추가
newLi.appendChild(text); // 텍스트를 <li>에 추가
input.value = ""; // 입력창을 비움
document.querySelector("ul").appendChild(newLi); // 새로운 <li>를 <ul>에 추가
}4) 수정 버튼 기능
리스트의 수정 버튼의 기능을 구현합니다.
- 처음에는 "수정" 버튼이 표시됩니다.
- 클릭하면 텍스트가 입력 필드로 바뀌고, 버튼은 "확인"으로 변경됩니다.
- "확인" 버튼을 클릭하면 입력한 텍스트가 목록에 반영되고, 버튼은 다시 "수정"으로 돌아갑니다.
let changebtn = document.createElement("button");
changebtn.innerHTML = "수정";
newLi.appendChild(changebtn); // 수정 버튼 추가
changebtn.addEventListener("click", function () {
let newInput = document.createElement("input"); // 새로운 입력 필드 생성
newInput.type = "text";
newInput.value = text.textContent; // 기존 텍스트 값을 입력 필드에 넣음
newLi.replaceChild(newInput, text); // 텍스트를 입력 필드로 교체
changebtn.innerHTML = "확인"; // 버튼 텍스트를 "확인"으로 변경
changebtn.addEventListener("click", function () {
text = document.createTextNode(newInput.value); // 새로운 텍스트 생성
newLi.replaceChild(text, newInput); // 입력 필드를 텍스트로 교체
changebtn.innerHTML = "수정"; // 버튼 텍스트를 다시 "수정"으로 변경
});
});
5) 삭제 버튼 기능
리스트의 삭제 버튼의 기능을 구현합니다.
- "삭제" 버튼을 클릭하면 해당
<li>항목이 ul에서 제거됩니다.
let deletebtn = document.createElement("button");
deletebtn.innerHTML = "삭제";
newLi.appendChild(deletebtn); // 삭제 버튼 추가
deletebtn.addEventListener("click", () => {
document.querySelector("ul").removeChild(newLi); // <ul>에서 <li> 삭제
});6) 리스트 간격 조정
자바스크립트로 리스트들의 기본적인 간격을 조정합니다.
- 체크박스는 오른쪽에 여백을 추가하여 버튼과 텍스트 사이가 구분되도록 합니다.
- 수정/삭제 버튼은 왼쪽에 여백을 주어 버튼들이 겹치지 않도록 합니다.
- 목록 항목은 아래에 여백을 주어 여러 항목들이 겹치지 않게 합니다.
check.style.marginRight = "20px";
changebtn.style.marginLeft = "20px";
deletebtn.style.marginLeft = "10px";
newLi.style.marginBottom = "10px";💌 전체 코드
- 위의 코드를 하나로 작성한 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
margin: 10px;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<input type="text" id="text_input" />
<button class="add_btn" onclick="todo_btn()">추가</button>
<ul></ul>
<script>
function todo_btn() {
let input = document.getElementById("text_input");
let newLi = document.createElement("li");
let check = document.createElement("input");
check.type = "checkbox";
let text = document.createTextNode(input.value); // 초기 텍스트
newLi.appendChild(check);
newLi.appendChild(text);
input.value = "";
document.querySelector("ul").appendChild(newLi);
let changebtn = document.createElement("button");
changebtn.innerHTML = "수정";
newLi.appendChild(changebtn);
let deletebtn = document.createElement("button");
deletebtn.innerHTML = "삭제";
newLi.appendChild(deletebtn);
deletebtn.addEventListener("click", () => {
document.querySelector("ul").removeChild(newLi);
});
check.style.marginRight = "20px";
changebtn.style.marginLeft = "20px";
deletebtn.style.marginLeft = "10px";
newLi.style.marginBottom = "10px";
let isEditing = false; // 수정 상태를 추적할 변수
// 수정 버튼 클릭 시
changebtn.addEventListener("click", function () {
if (isEditing) {
// 확인 상태일 때는 텍스트를 수정
let newInput = document.createElement("input");
newInput.type = "text";
newInput.value = text.textContent; // 기존 텍스트 값을 넣음
// 텍스트를 새로운 입력 필드로 교체
if (newLi.contains(text)) {
newLi.replaceChild(newInput, text);
}
changebtn.innerHTML = "확인"; // 버튼을 "확인"으로 변경
// "확인" 버튼 클릭 시
changebtn.addEventListener("click", function () {
// 새로 입력된 값을 텍스트로 변경
text = document.createTextNode(newInput.value);
if (newLi.contains(newInput)) {
newLi.replaceChild(text, newInput); // 기존 input을 텍스트로 교체
}
changebtn.innerHTML = "수정"; // 버튼을 다시 "수정"으로 변경
isEditing = false; // 수정 상태가 끝났으므로 false로 설정
});
isEditing = true; // 수정 상태로 변경
} else {
// 수정 상태일 때 처리 (이미 수정 중이라면 "확인"으로 진행)
let newInput = document.createElement("input");
newInput.type = "text";
newInput.value = text.textContent; // 기존 텍스트 값을 넣음
// 텍스트를 새로운 입력 필드로 교체
if (newLi.contains(text)) {
newLi.replaceChild(newInput, text);
}
changebtn.innerHTML = "확인"; // 버튼을 "확인"으로 변경
// "확인" 버튼 클릭 시
changebtn.addEventListener("click", function () {
// 새로 입력된 값을 텍스트로 변경
text = document.createTextNode(newInput.value);
if (newLi.contains(newInput)) {
newLi.replaceChild(text, newInput); // 기존 input을 텍스트로 교체
}
changebtn.innerHTML = "수정"; // 버튼을 다시 "수정"으로 변경
});
isEditing = true; // 수정 상태로 변경
}
});
}
</script>
</body>
</html>24일차 후기
- 코드를 작성하다가 에러가 뜨면 조급해지고 고치기 싫어지는데 진짜.. 문제입니다.
- 오늘은 간단하게 작성했는데 다음에는 CSS도 신경써보겠습니다.
- 수정 버튼 부분이 좀 헷갈려서 시간이 많이 걸렸습니다.
- 연속으로 수정할 때 오류가 나던데.. 결국 고쳤지만? 어떻게 된건지 모르겠습니다.
- 아직은 모르는 것도.. 코드 작성 스킬도 부족한 것 같습니다. ヽ､ヽ(。・︿ ・。)ヽ､ヽ
૮꒰ ྀི〃´꒳`〃꒱ა