My toDo App
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습 3-2</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script>
function addItem() {
// 입력값을 읽어와 todo 변수에 저장
let todo = document.getElementById("item");
// <ul> 요소를 참조해 list 변수에 저장
let list = document.getElementById("todolist");
// 새로운 <li> 요소를 생성해 listitem 변수에 저장
let listitem = document.createElement("li");
// 새로운 목록에 디자인 추가
listitem.className = "d-flex list-group-item list-group-item-action list-group-item-warning";
// <li> 요소에 들어갈 닫기 버튼 생성
let xbtn = document.createElement("button");
// 버튼에 부트스트랩 클래스 적용
xbtn.className = "btn-close ms-auto";
// close 버튼에 이벤트 처리
xbtn.onclick = function(e) {
// 이벤트가 발생한 <li> 요소를 구하여 <ul> 요소에서 제거
let pnode = e.target.parentNode;
list.removeChild(pnode);
}
// 입력값을 <li> 탯그 body에 추가
listitem.innerText = todo.value;
// <li>에 버튼 추가
listitem.appendChild(xbtn);
// ul 요소에 li 요소 추가
list.appendChild(listitem);
// 입력칸 비우기 및 포커스 이동 : 새로운 할 일 추가한 후, 다음 입력칸 비우고 다시 입력할 수 있도록 포커스 지정
todo.value = "";
todo.focus();
}
</script>
</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>728x90
반응형
'프로그래밍 언어 > JSP' 카테고리의 다른 글
| JSP_22.10.27 (0) | 2022.10.28 |
|---|---|
| JSP_22-10-25 (0) | 2022.10.26 |
| JSP_회원가입 (0) | 2022.10.24 |
| JSP_22-10-24 (0) | 2022.10.24 |
