<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script>
function addItem() {
// ul 요소 가져옴
let list = document.getElementById('todolist');
// 입력값을 읽어옴.
let todo = document.getElementById('item');
// 새로운 li 요소를 생성
let listitem = document.createElement('li');
// li 요소에 들어갈 닫기 버튼 생성
let xbtn = document.createElement('button');
listitem.className = 'd-flex list-group-item list-group-item-action list-group-item-warning';
xbtn.className = 'btn-close ms-auto';
// close 버튼에 이벤트 처리
xbtn.onclick = function(e) {
// 이벤트가 발생한 li 요소를 구해서 ul 요소에서 제거
let pnode = e.target.parentNode;
list.removeChild(pnode);
}
// li 요소 구성
listitem.innerText = `${todoCount}. ${todo.value}`;
listitem.appendChild(xbtn);
// ul 요소에 li 요소 추가
list.appendChild(listitem);
// 입력칸 비우기 및 포커스 이동
todo.value = '';
todo.focus();
todoCount++;
}
</script>
<title>My ToDo App</title>
</head>
<body>
<div class="container bg-warning shadow mx-auto mt-5 p-5 w-75">
<h2>My ToDo App</h2>
<hr>
<div class="input-group">
<input id="item" class="form-control" type="text" placeholder="할일을 입력하세요..">
<button type="button" class="btn btn-primary" onclick="addItem()">할일 추가</button>
</div>
<hr>
<ul id="todolist" class="list-group"></ul>
</div>
</body>
</html>총 개수와 번호 추가
1, 목록 번호 (ex1번 학교가기)
2. 목록 별 날짜, 시간출력
3. 전체 목록 개수: (예) 할이 5개
(삭제 시 개수 감소함)
innerhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script>
let todoCount = 1; // 카운트
let todoCounts = 0;
//할 일 개수 증가 완료
// document.getElementById("input-sum").innerHTML = `${todoCounts}`;
function updateTotalCount() {
document.getElementById("input-sum").innerText = `전체 목록 개수: 할일 ${todoCounts}개`;
}
function addItem() {
// ul 요소 가져옴
let list = document.getElementById('todolist');
// 입력값을 읽어옴.
let todo = document.getElementById('item');
// 새로운 li 요소를 생성
let listitem = document.createElement('li');
// li 요소에 들어갈 닫기 버튼 생성
let xbtn = document.createElement('button');
listitem.className = 'd-flex list-group-item list-group-item-action list-group-item-warning';
xbtn.className = 'btn-close ms-auto';
// close 버튼에 이벤트 처리
xbtn.onclick = function(e) {
// 이벤트가 발생한 li 요소를 구해서 ul 요소에서 제거
todoCounts--;
let pnode = e.target.parentNode;
list.removeChild(pnode);
updateTotalCount(); // 전체 목록 개수 업데이트
}
// li 요소 구성
listitem.innerText = `${todoCount}. ${todo.value}` // Include the count
listitem.appendChild(xbtn);
// ul 요소에 li 요소 추가
list.appendChild(listitem);
todoCount++;
todoCounts++;
updateTotalCount(); // 전체 목록 개수 업데이트
// 입력칸 비우기 및 포커스 이동
todo.value = '';
todo.focus();
}
</script>
<title>My ToDo App</title>
</head>
<body>
<div class="container bg-warning shadow mx-auto mt-5 p-5 w-75">
<h2>My ToDo App</h2>
<!-- 할일 개수 옆에 숫자 추가 -->
<span id="input-sum"> </span>
<hr>
<div class="input-group">
<input id="item" class="form-control" type="text" placeholder="할일을 입력하세요..">
<button type="button" class="btn btn-primary" onclick="addItem()">할일 추가</button>
</div>
<hr>
<ul id="todolist" class="list-group"></ul>
</div>
</body>
</html>'서버 > JSP' 카테고리의 다른 글
| MVC패턴 (1) | 2023.12.05 |
|---|---|
| 액션 종합 예제: 계산기 구현 jsp, java Bean, Html 세가지로 활용 (0) | 2023.11.30 |
| 회원가입 form (0) | 2023.11.28 |
| html 수업 (0) | 2023.11.28 |
| jsp로 활용한 코딩 (0) | 2023.11.23 |