기본 숙제(필수)
직접 해보는 손코딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect')
rects.forEach((rect, index) => {
const width = (index+1) *100;
const src = `http://placekittxen.com/${width}/250`
rect.setAttribute('src', src)
})
})
</script>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
</html>결과
TodoList 만들기 (추가 숙제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todolist</title>
</head>
<body>
<h1>할 일 목록</h1>
<input id="tood">
<button id="add-button">추가하기</button>
<div id="todo-list">
</div>
</body>
<script>
document.addEventListener(`DOMContentLoaded`, () => {
// 문서 객체를 가져옵니다.
const input = document.querySelector('#todo')
const todoList = document.querySelector('#todo-list')
const addButton = document.querySelector('#add-button')
// 변수를 선언합니다.
let keyCount = 0;
// 함수를 선언합니다.
const addTodo = () => {
// 입력 양식에 내용이 없으면 추가하지 않습니다.
if (input.value.trim() === ''){
alert('할 일을 입력해주세요.')
return
}
// 문서 객체를 설정합니다.
const item = document.createElement('div')
const checkbox = document.createElement('input')
const text = document.createElement('span')
const button = document.createElement('button')
// 문서 객체를 식별할 키를 생성합니다.
const key = keyCount
keyCount += 1
// item 객체를 조작하고 추가합니다.
item.setAttribute('data-key', key)
item.appendChild(checkbox)
item.appendChild(text)
item.appendChild(button)
todoList.appendChild(item)
// checkbox 객체를 조작합니다.
checkbox.type = 'checkbox'
checkbox.addEventListener('change', (event) => {
item.style.textDecoration
= event.target.checked ? 'line-through' : ''
})
// text 객체를 조작합니다.
text.textContent = input.value
// button 객체를 조작합니다.
button.textContent = '제거하기'
button.addEventListener('click', () => {
removeTodo(key)
})
// 입력 양식의 내용을 비웁니다.
input.value = ''
}
const removeTodo = (key) => {
// 식별 키로 문서 객체를 제거합니다.
const item = document.querySelector(`[data-key="${key}"]`)
todoList.removeChild(item)
}
// 이벤트 연결
addButton.addEventListener('click', addTodo)
input.addEventListener('keyup', (event) => {
// 입력 양식에서 Enter 키를 누르면 바로 addTodo() 함수를 호출합니다.
const ENTER = 13
if (event.keyCode === ENTER) {
addTodo()
}
})
})
</script>
</html>
느낀 점
솔직히 초반에는 되게 동기부여도 있어서 열심히하고 정리도 많이 했는데 가면 갈수록 정신력이 나태해졌던 나 자신이 조금 부끄럽다. 하지만 6주동안 열심히 했고 앞으로 더 복습하며 배운 내용들을 다시 되새길 생각이다.
