728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>ToDoList</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>ToDoList</h1>
</div>
<div id="ToDo_Box">
<input type="text" id="ToDo" style="width:350px; height:40px;">
<button onclick="add()" style="width:40px; height:40px;">추가</button>
</div>
<div id="ListBox">
<div id="List" class="List_box">
<div id="checkbox">
<input type="checkbox" class="checked">
</div>
<div id="text">
</div>
</div>
</div>
<div id="deleteBox">
<button onclick="deleteCheck()" style="width:60px; height:30px;">선택삭제</button>
<button onclick="deleteAll()" style="width:60px; height:30px;">전체삭제</button>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
var wrap = document.getElementById('wrap')
var ListBox = document.getElementById('ListBox')
var checkedList = document.getElementsByClassName('checked')
function add() {
var text = document.getElementById('ToDo').value
var newList = document.createElement('div')
newList.setAttribute('id','List')
var newcheckbox = document.createElement('div')
newcheckbox.setAttribute('id','checkbox')
newcheckbox.innerHTML='<input type="checkbox" class="checked">'
var newtext = document.createElement('div')
newtext.setAttribute('id','text')
newtext.innerHTML = text
newList.appendChild(newcheckbox)
newList.appendChild(newtext)
ListBox.appendChild(newList)
// alert('추가 완료!')
}
function deleteCheck(){
for(var i =0; i<checkedList.length; i++) {
if(checkedList[i].checked) {
ListBox.removeChild(ListBox.children[i])
i--
}
}
}
function deleteAll(){
var ListBox = document.getElementById('ListBox')
ListBox.innerText=" ";
// alert('전체 삭제 완료!')
}
function deleteList() {
var delBtn = document.getElementsByClassName("List_box")
console.log(delBtn)
}
728x90
반응형
'HTML+CSS(실습)' 카테고리의 다른 글
| 2023-05-02(화) 미니프로젝트(Counter) (0) | 2023.05.02 |
|---|---|
| 2023-05-02(화) 미니프로젝트(Random Color Page) (0) | 2023.05.02 |
| 2023-04-25(화) 미세먼지 api 실습 (0) | 2023.04.25 |
| 2023-04-25(화) 지도api 실습 (0) | 2023.04.25 |
| 2023-04-25(화) 날씨api 실습 (0) | 2023.04.25 |