728x90
자바스크립트 to do list 만들기
1. 입력란 만들기
📌 html로 구현
<body>
<h1>할 일 목록</h1>
<input>
<button>추가 하기</button>
</body>
📌 javascript로 구현
<script>
document.addEventListener('DOMContentLoaded', ()=> {
const h1 = document.createElement('h1')
h1.textContent = '할 일 목록'
document.body.appendChild(h1)
const input = document.createElement('input')
document.body.appendChild(input)
const addButton = document.createElement('button')
addButton.textContent = '추가 하기'
document.body.appendChild(addButton)
})
</script>2. 해야 할 일 리스트 출력
📌 html로 구현
<body>
<div>
<input type="checkbox" name="" id="">
<span></span>
<button></button>
</div>
</body>id 이름 태그를 붙이고 temp_html을 append 해서 구현할 수 있을 것이다.
📌 javascript로 구현
<script>
document.addEventListener('DOMContentLoaded', ()=> {
addButton.addEventListener('click', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
div.appendChild(checkbox)
const span = document.createElement('span')
span.textContent = input.value
div.appendChild(span)
const deleteButton = document.createElement('button')
deleteButton.textContent = '제거하기'
div.appendChild(deleteButton)
})
})
</script>추가하기 버튼을 클릭하면, div 요소가 생기고 div요소 안에 appendChild를 이용해 체크박스, 해야할일, 버튼을 넣어준다.
만약 input 값이 없다면, 해야할 일 리스트에 추가하지 못하도록 다음과 같이 코드를 수정해준다.
addButton.addEventListener('click', () => {
if(input.value !== ''){
const div = document.createElement('div')
document.body.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
div.appendChild(checkbox)
const span = document.createElement('span')
span.textContent = input.value
input.value = ''
div.appendChild(span)
const deleteButton = document.createElement('button')
deleteButton.textContent = '제거하기'
div.appendChild(deleteButton)
}
})
3. to do 리스트 체크하면 선 긋기
📌 javascript
checkbox.addEventListener('change', () => {
if(checkbox.checked){
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
checkbox.addEventListener('change', () => {
if(checkbox.checked){
span.style.textDecoration = 'line-through'
} else {
span.style.textDecoration = ''
}
})4. 제거하기 버튼 클릭하면 목록에서 삭제하기
📌 javascript
deleteButton.addEventListener('click',() =>{
div.parentNode.removeChild(div)
})추가적인 기능
5. 엔터를 입력해도 추가하기 버튼을 눌렀을 때와 같은 동작하기
input.addEventListener('keyup', (event) => {
//엔터를 나타내는 숫자 13
if(event.keyCode == 13) {
const div = document.createElement('div')
document.body.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.addEventListener('change', () => {
if(checkbox.checked){
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
div.appendChild(checkbox)
const span = document.createElement('span')
span.textContent = input.value
input.value = ''
div.appendChild(span)
const deleteButton = document.createElement('button')
deleteButton.textContent = '제거하기'
deleteButton.addEventListener('click',() =>{
div.parentNode.removeChild(div)
})
div.appendChild(deleteButton)
}
})엔터를 클릭하면 div 생성되도록 작성
6. 반복되는 코드 함수로 만들어주기
// 반복되는 코드 함수로 빼주기
const addTodo = () => {
const div = document.createElement('div')
document.body.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.addEventListener('change', () => {
if(checkbox.checked){
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
div.appendChild(checkbox)
const span = document.createElement('span')
span.textContent = input.value
input.value = ''
div.appendChild(span)
const deleteButton = document.createElement('button')
deleteButton.textContent = '제거하기'
deleteButton.addEventListener('click',() =>{
div.parentNode.removeChild(div)
})
div.appendChild(deleteButton)
}
📌 엔터 클릭
input.addEventListener('keyup', (event) => {
//엔터를 나타내는 숫자 13
if(event.keyCode == 13) {
addTodo()
}
})
📌 추가하기 버튼 클릭
addButton.addEventListener('click', () => {
if(input.value !== ''){
addTodo()
}
})전체 코드
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', ()=> {
// 반복되는 코드 함수로 빼주기
const addTodo = () => {
const div = document.createElement('div')
document.body.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.addEventListener('change', () => {
if(checkbox.checked){
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
div.appendChild(checkbox)
const span = document.createElement('span')
span.textContent = input.value
input.value = ''
div.appendChild(span)
const deleteButton = document.createElement('button')
deleteButton.textContent = '제거하기'
deleteButton.addEventListener('click',() =>{
div.parentNode.removeChild(div)
})
div.appendChild(deleteButton)
}
const h1 = document.createElement('h1')
h1.textContent = '할 일 목록'
document.body.appendChild(h1)
const input = document.createElement('input')
input.addEventListener('keyup', (event) => {
//엔터를 나타내는 숫자 13
if(event.keyCode == 13) {
addTodo()
}
})
document.body.appendChild(input)
const addButton = document.createElement('button')
addButton.textContent = '추가 하기'
document.body.appendChild(addButton)
addButton.addEventListener('click', () => {
if(input.value !== ''){
addTodo()
}
})
})
</script>
</head>
<body>
</body>
</html>참고한 책 : 혼자 공부하는 자바스크립트
참고한 영상 : https://youtu.be/7wD-5T5Xv2M
'JavaScript' 카테고리의 다른 글
| 자바스크립트 예외 처리 (0) | 2022.11.09 |
|---|---|
| 자바스크립트 localStorage 객체 (0) | 2022.11.09 |
| 자바스크립트 이벤트 활용2 (0) | 2022.11.08 |
| 자바스크립트 이벤트 활용1 (0) | 2022.11.08 |
| 자바스크립트 문서 객체 조작하기 (0) | 2022.11.08 |
