s10_todolist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1">
<title>할 일 목록(TodoList)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style type="text/css">
body{
margin:0;
padding:0;
font-family:sans-serif;
}
.title{
text-align:center;
font-weight:bold;
font-size:20pt;
}
.todo-done{
text-decoration:line-through;
}
.pointer{
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="card card-body">
<div class="title">할 일 목록(TodoList)</div>
</div>
<div class="card card-default">
<div class="card-body">
<div class="row mb-3">
<div class="col">
<div class="input-group">
<input type="text" class="form-control"
name="msg" placeholder="할 일을 여기에 입력!"
id="todo">
<span class="btn btn-primary"
id="add_btn">추가</span>
</div>
</div>
</div><!-- end of input div -->
<div class="row">
<div class="col">
<ul class="list-group" id="list"></ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
let ts = new Date().getTime();
const todoList = [
{id:ts,todo:"자전거 타기",completed:false},
{id:ts+1,todo:"딸과 공원 산책",completed:true},
{id:ts+2,todo:"일요일 애견 카페",completed:false},
{id:ts+3,todo:"원고 집필",completed:false}
];
//목록 처리
function selectList(){
$('#list').empty();
$(todoList).each(function(index,item){
let output = '';
if(item.completed){//할 일 완료
output += '<li class="list-group-item list-group-item-success">';
output += '<span class="pointer todo-done check-btn" id="'+item.id+'">' + item.todo + '(완료)</span>';
}else{//할 일 미완료
output += '<li class="list-group-item">';
output += '<span class="pointer check-btn" id="'+item.id+'">' + item.todo + '</span>';
}
output += '<span class="float-end badge bg-secondary pointer delete-btn" id="'+item.id+'">삭제</span>';
output += '</li>';
$('#list').append(output);
});
}//end of selectList
//삭제 이벤트 연결
$(document).on('click','.delete-btn',function(){
let id = this.id
let index = todoList.findIndex((item)=> id == item.id);
//배열에서 선택한 객체 삭제
todoList.splice(index,1);
selectList();
});
//할 일 체크 이벤트 연결
$(document).on('click','.check-btn',function(){
//이벤트가 발생한 li 태그의 id
let id = this.id;
//findIndex는 매개변수로 전달된 함수에 배열의 요소를 전달해서
//비교연산 후 일치하게 되면 해당 요소의 인덱스를 반환
let index = todoList.findIndex((item)=> id == item.id);
todoList[index].completed = !todoList[index].completed;
selectList();
});
//등록 key이벤트 연결
$('#todo').keydown(function(event){
if(event.keyCode == 13){//enter키를 눌렀을 때
//this : 이벤트가 발생한 input 객체
addTodo($(this));
}
});
//등록 click이벤트 연결
$('#add_btn').click(function(){
addTodo($('#todo'));
});
//등록
function addTodo(todo){
todoList.unshift({id:new Date().getTime(),
todo:todo.val(),completed:false});
todo.val('');//입력창 초기화
//새로 저장된 데이터까지 포함해서 전체 목록을 다시 호출함
selectList();
}
//초기 데이터 설정
selectList();
</script>
</body>
</html>
