혼공학습단 마지막 미션이다.
2024년 1월 3일부터 2월 9일까지 약 38일간 열심히 달렸다.
어떤 책이든 책 한 권을 다 보는 것이 쉽지 않은데 혼공학습단이라는 동기가 생겨서 꾸준하게 달려올 수 있었다.
혼공족장님을 포함해 함께 달려온 러닝 메이트 모두에게 감사하고 고생했다고 말해주고 싶다.
기본 미션
p.315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡처하기
코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect') // 특정 클래스로 요소를 선택한다
rects.forEach((rect, index) => {
const width = (index + 1) * 100
// index 값은 [0, 1, 2, 3]이 반복된다. 1을 더해서 [1, 2, 3, 4]가 반복되게 만들고
// 100을 곱해서 너비가 [100, 200, 300, 400]이 되게 만들었다
rect.setAttribute('src', src) // src 속성에 값을 지정한다
})
})
</script>
</head>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
</html>
출력 된 이미지:
선택 미션
p.352 누적 예제를 활용하여 본인이 할 일 목록을 만들어 캡처하기
코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>할 일 목록</h1>
<input id="todo">
<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 // 이후에 removeTodo() 함수에서 문서 객체를 쉽게 제거하기 위한 용도로 만든 변수
// 함수를 선언한다.
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 // 이후에 removeTodo() 함수에서 문서 객체를 쉽게 제거하기 위한 용도로 만든 변수
keyCount += 1
// item 객체를 조작하고 추가한다.
item.setAttribute('data-key', key)
item.appendChild(checkbox)
item.appendChild(text)
item.appendChild(button)
todoList.appendChild(item)
// <div data-key="숫자">
// <input>
// <span></span>
// <button></button>
// </div>
// 형태를 구성한다.
// checkbox 객체를 조작한다
checkbox.type = 'checkbox' // <div data-key="checkbox" 형태를 구성한다
checkbox.addEventListener('change', (event) => { // checkbox를 클릭하면 선을 그어준다
item.style.textDecoration = event.target.checked ? 'line-through' : ''
})
// text 객체를 조작한다.
text.textContent = input.value // <span>글자</span> 형태를 구성
// button 객체를 조작한다
button.textContent = '제거하기'
button.addEventListener('click', () => {
removeTodo(key)
})
// 입력 양식의 내용을 비운다
input.value = ''
}
const removeTodo = (key) => {
// 식별 키로 문서 객체를 제거한다
const item = document.querySelector(`[data-key="${key}"]`)
// 위에서 지정한 <div data-key="숫자">를 기반으로 요소를 찾고 제거한다.
todoList.removeChild(item)
}
// 이벤트 연결
addButton.addEventListener('click', addTodo)
input.addEventListener('keyup', (event) => {
// 입력 양식에서 Enter 키를 누르면 addTodo() 함수를 호출한다
const ENTER = 13 // 13은 ENTER의 keycode
if (event.keyCode === ENTER) {
addTodo()
}
})
})
</script>
</html>
본인이 할 일 목록 만들어보기:
마무리
혼공학습단은 이렇게 마무리되지만 아직 뒷부분 고급편이 남아있다.
고급 편에서는 클래스와 리액트를 간단하게 다루고 있기 때문에 이 부분도 꼭 짚고 넘어가야 한다.
남은 고급편까지 깔끔하게 마무리해보자.
'혼공학습단 11기(完)' 카테고리의 다른 글
| [혼공스] 09 - 2 '클래스의 고급 기능' 정리 (1) (0) | 2024.02.15 |
|---|---|
| [혼공스] 09 - 1 '클래스의 기본 기능' 정리 (0) | 2024.02.13 |
| [혼공스] 08 - 2 '예외 처리 고급' 정리 (0) | 2024.02.08 |
| [혼공스] 08 - 1 '구문 오류와 예외' 정리 (1) | 2024.02.07 |
| [혼공스] 07 - 2 '이벤트 활용' 정리(3) (0) | 2024.02.06 |
