혼공자바스크립트 6주차

혼공단/js

by nownow 2023. 8. 20. 23:44

마지막주차까지 와버렸다..

기본미션

전에 사용하느라 넣어둔 이미지 파일들 사용해서 구현했다.

선택미션

덜보고 혼자해보려고하니 시간이 꽤 걸린다..

    <!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>
    <body>
        <h1>할 일 목록</h1>
        <input>
        <button>추가하기</button>
        <div id="list">

        </div>
        

        <script>
            const addButton=document.querySelector("button")
            addButton.addEventListener("click",()=>
            add(input.value))
            const input = document.querySelector("input")
            const status = document.querySelector("#list")
            input.addEventListener("keyup",(event)=>
            {
                if(event.key=='Enter')
                {
                    if(input.value.trim()=='')
                    alert("값을 입력해주세요")
                    else
                    add(input.value)
                }
            })

            const add=(str)=>
            {
                const key = Math.random()
                const checkbox=document.createElement("input")
                const todo=document.createElement("div")
                const removeButton=document.createElement("button")
                const text=document.createElement("span")
                text.textContent=str
                checkbox.type="checkbox"

                todo.appendChild(checkbox)
                todo.appendChild(text)
                removeButton.textContent="제거하기"
                todo.appendChild(removeButton)
                todo.setAttribute('key',key)
                checkbox.addEventListener('click',()=>
                {
                    check(checkbox)
                })
                removeButton.addEventListener('click',()=>
                {
                    removeDiv(key)
                })
                list.appendChild(todo)
                input.value=''
            }
            const removeDiv=(key)=>
            {
                const selected=document.querySelector(`[key="${key}"]`)
                status.removeChild(selected)
            }
            const check=(sts)=>{
                const span=sts.parentNode.querySelector('span')
                console.log(sts.checked)
                if(sts.checked)
                {
                    span.style.textDecoration="line-through"
                    
                    console.log(span.style)
                }
                else
                {
                    span.style.textDecoration="none"
                }

            }
        </script>

    </body>
    </html>

대충 알고 넘어갔던 내용들 차근차근 돌아보기에 좋았던 혼공JS 활동이었읍니다..

'혼공단 > js' 카테고리의 다른 글

혼공자바스크립트 5주차 객체 (0)	2023.07.25
혼공자바스크립트 4주차 함수 (익명함수, 선언적함수, spread 연산자, 콜백함수, 화살표함수) (0)	2023.07.25
혼공 자바스크립트 3주차 (파괴적처리, 비파괴적처리) (0)	2023.07.20
혼공 자바스크립트 2주차 (자바스크립트 if문 , html 입력이벤트, 자바스크립트 버튼 클릭 이벤트) (1)	2023.07.16
혼공 자바스크립트 1주차 Hello World! (vscode 케릭터 테마 doki theme) (0)	2023.07.01