혼공단 자바스크립트 6주차 미션

by 퓨어워터맨 2023. 2. 18. 23:39

728x90

안녕하세요 시간은 정말 빨리 가는 거 같습니다. 이제 9기의 마지막 주차 과제네요

항상 끝날 때 되면 조금 더 잘 할걸 이라는 후회가 남습니다. 그래도 책 한권을 가볍게나마 뗄 수 있었다는 점에서 의의를 찾고 싶습니다. 시간을 따로내어 전체적으로 복습을 하도록 하겠습니다.

구분	진도	기본 미션	선택 미션
1주차 (1/2 ~ 1/8)	Chapter 01 ~ 02	p.54의 <파일 만들고 저장해 실행하기>에서 "Hello World" 출력하기	Ch.01(01-1)확인 문제 1번 상세하게 적고 인증하기
2주차 (1/9 ~ 1/15)	Chapter 03	p. 139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기	p. 139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기
3주차 (1/16 ~ 1/22)	Chapter 04	p. 195의 확인 문제 4번 풀고 인증하기	p. 183 [좀 더 알아보기] 손코딩 실행하고 결과화면 인증하기
🙇설 연휴🙇 (1/23 ~ 1/29)	야호! 한 주 쉬어갑니다 ❣️새해 복 많이 받으세요❣️ 야호! 한 주 쉬어갑니다
4주차 (1/30 ~ 2/5)	Chapter 05	p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기	p. 240 확인문제 1번 풀고, 풀이 과정 설명하기
5주차 (2/6 ~ 2/12)	Chapter 06	객체, 속성, 메소드가 무엇인지 설명하기	p.288 확인 문제 3번 풀고, 풀이 과정 설명하기
6주차 (2/13 ~ 2/19)	Chapter 07 ~ 08	p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기	p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기

기본미션 : p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기

<!DOCTYPE html>
<html>
<head>
	<title> DOMContentLoaded </title>
    <script>
    	document.addEventListemer('DOMContentLoaded', () =>{
        	const rects = document.quertSelectorAll('.rect')  //측정 클래스 요소 선택
         
        rects.forEach((rect, index) => {
        	const width = (index +1) *100
            const src = 'http://placekitten.com/$(width)/250'
            rect.setAttribute('src', src)  // src 속성에 값을 저장
       		 })
        })
    </script>
</head>

<body>
	<img class = "rect">
    <img class = "rect">
    <img class = "rect">
    <img class = "rect">
</body>
</html>

선택미션 : p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기

<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

        // 함수 선언
        const addTodo = () => {
            // 입력 양식에 내용이 없으면 추가 X
            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>

어마어마한 코딩에 잠깐 놀랐지만, 그래도 차분히 하다보니 작성을 완료 하였습닏.

마무리 및 회고

6주간의 활동이 이제 끝났는데, 약간의 아쉬움도 있는 것이 사실입니다. 더 열심히 할걸...

3월달에는 전체적으로 복습하고, 코딩에 대한 기초 체력을 기르도록 하겠습니다.

그동안 모두 고생하셨습니다.

728x90

'혼공학습단9기_자바스크립트' 카테고리의 다른 글

혼공단 자바스크립트 5주차 일지 (0)	2023.02.11
혼공단 자바스크립트 4주차 일지 (0)	2023.02.04
혼공학습9기_자바스크립트 3주차 (0)	2023.01.17
혼공학습단 9기 - 혼공 JS 2주차 : 태어난 해 알아 맞추기 (0)	2023.01.15
혼공학습단 9기 - 혼공 JS 1주차 : 자바스크립트 개요와 개발환경 설정 (0)	2023.01.08