반응형
할 일 목록 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
// 중복코드 함수로 만들기
const addTodo = () => {
const div = document.createElement('div') //div
document.body.appendChild(div)
const checkbox = document.createElement('input') //input=checkbox
checkbox.type = 'checkbox'
checkbox.addEventListener('change', () => {
if(checkbox.checked) { // 체크박스가 체크 됐을 때 실행
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
div.appendChild(checkbox) // 체크박스 생성
const list = document.createElement('span') //list
list.textContent = addText.value // inputText의 text 복사
addText.value = '' // list가 생성되면 inputText 지우기
div.appendChild(list) // list 글자 생성
const deleteButton = document.createElement('button') //deleteButton
deleteButton.textContent = '제거하기'
deleteButton.addEventListener('click', () => {
div.parentElement.removeChild(div)
})
div.appendChild(deleteButton) // 제거하기 버튼 생성
}
const div = document.createElement('div') //div
document.body.appendChild(div)
const h1 = document.createElement('h1') //h1
h1.textContent = '할 일 목록'
div.appendChild(h1)
document.body.appendChild(div) //div
// 엔터키 눌렀을 때 리스트 생성
const addText = document.createElement('input') //input=text
addText.type = 'text'
div.appendChild(addText)
addText.addEventListener('keyup', (e) => {
if(e.keyCode === 13) {
if(addText.value !== '') { // text상자에 글자가 있을 때만 실행
addTodo()
}
}
})
// 추가하기 버튼 눌렀을 때 리스트 생성
const addButton = document.createElement('button') //addButton
addButton.textContent = '추가하기'
div.appendChild(addButton)
addButton.addEventListener('click', () => {
if(addText.value !== '') { // text상자에 글자가 있을 때만 실행
addTodo()
}
})
})
</script>
</head>
<body>
</body>
</html>반응형
'Front-End > JavaScript' 카테고리의 다른 글
| JavaScript 복습 (0) | 2023.02.19 |
|---|---|
| JavaScript(7) - 실습 : 회원가입 (0) | 2023.02.17 |
| 자바스크립트 예제(6) (0) | 2023.02.16 |
댓글