하고 싶은 일
1. 할 일을 입력 받음
2. 리스트에 올라감
3. 리스트의 테두리에 박스가 있었으면 좋겠음
4. 리스트의 마커가 체크박스였으면 좋겠음
5. 체크박스가 checked 상태일 때 취소선이 생김
6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음
7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring)
취소선 만들기
체크박스의 상태를 알 수만 있으면
checked 또는 unchecked의 상태에 따라 취소선을 긋거나 지우면 되기 때문에 크게 어려운 일은 아니었다.
addEventListener() 을 사용해 체크박스의 체크여부에 따라 취소선을 그릴 수 있도록 만들었다.
1. addEventListener(eventType, callback)
웹 페이지에서 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 자바 스크립트 메소드이다.
eventType으로는 쓴 'change'는 HTML 폼 요소의 값이 변경될 때 발생하는 이벤트로, 텍스트 입력, 체크박스 선택 등의 변경이 발생할 때 사용한다.
callback으로는 doneTodo(span)라는 함수를 썼는데, 이 함수는 체크박스의 체크 여부를 확인하고,
체크되었다면 'line-through'(취소선),
체크가 해제되었다면 다시 원래의 상태로 'None'을 해주도록 한다.
추가한 코드는 아래와 같다.
checkbox.addEventListener("change", doneTodo(span));function doneTodo(span) {
return function () {
{
if (this.checked) {
span.style.textDecoration = "line-through";
} else {
span.style.textDecoration = "none";
}
}
};
}
2. 전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Todo-List</title>
<style>
#wholeList {
background-color: powderblue;
padding: 5px;
border: 2px solid lightgray;
margin-left: 500px;
margin-right: 500px;
margin-top: 5px;
padding-bottom: 5px;
}
#input {
border-top: 1px solid lightgray;
padding-top: 5px;
margin-bottom: 0px;
}
#list {
display: inline-block;
text-align: left;
padding: 5px 0px 5px 5px;
margin-bottom: 5px;
font-size: 24px;
}
body {
text-align: center;
}
ul {
list-style-type: none;
}
</style>
<script>
var todolist = [];
function uploadTodoList() {
var enrollText = document.getElementById("enrollText");
var list = document.getElementById("list");
var txt = enrollText.value;
todolist.push(txt);
enrollText.value = null;
list.innerHTML = "";
for (var i = 0; i < todolist.length; i++) {
var todoItem = document.createElement("li");
var checkbox = document.createElement("input"); //체크박스
var span = document.createElement("span"); // 글자
checkbox.type = "checkbox";
span.appendChild(document.createTextNode(todolist[i]));
todoItem.appendChild(checkbox);
todoItem.appendChild(span);
list.appendChild(todoItem);
console.log(list);
checkbox.addEventListener("change", doneTodo(span));
}
function doneTodo(span) {
return function () {
{
if (this.checked) {
span.style.textDecoration = "line-through";
} else {
span.style.textDecoration = "none";
}
}
};
}
}
</script>
</head>
<body>
<h1>To-Do List</h1>
<div id="wholeList">
<ul id="list"></ul>
<!-- 할일 입력하기 -->
<div id="input">
<input id="enrollText" type="text" />
<input
type="button"
value="등록"
onclick="
uploadTodoList();
alert('등록 완료!');"
/>
</div>
</div>
</body>
</html>'Front-End' 카테고리의 다른 글
| [React] 기초 환경 세팅, 코드 수정, 배포 (0) | 2023.08.14 |
|---|---|
| [JavaScript] To-do List 만들기 - 3 (목록의 요소 삭제하기, 체크박스 수정) (0) | 2023.08.14 |
| [JavaScript] To-do List 만들기 - 1 (박스 만들기, list의 marker로 checkbox 사용) (0) | 2023.07.01 |
| [JavaScript] 객체와 메소드와 반복문 (0) | 2023.06.28 |
| [JavaScript] 반복문과 함수 (0) | 2023.06.26 |
