04/12, 13 [ Todo 리스트 ]

Noh Sinyoung·2023년 4월 12일
0
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 상단 메뉴 */
        * {margin: 0; padding: 0;}
        h2 {display: inline-block;}
        label {float: right;}
        header {
            color: azure;
            padding: 10px;
            background: linear-gradient(to left, #e5d713 10%, #27dfb7 50%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }

        .heart {
            color: #df5281; flex: 1;
            cursor: pointer;
        }
        .done { 
            color: #1c941e;
            cursor: pointer;
        }
        .clear {
            color: #ad1515;
            cursor: pointer;
            flex: 1;
        }
        .content {
            flex: 8;
        }
        .todo-list li {
            border-bottom: solid 1px rgb(221, 221, 221);
            padding: 15px;
            display: flex;
        }
        #input-box {
            border: none;
            border-radius: 3px;
        }

    </style>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body>
    <header>
        <h2>Todo 리스트</h2>
        <label for="">할 일 추가 <input type="text" id="input-box"></label>
    </header>
    <section>
        <ul class="todo-list">
            <!-- <li>
                <i class="material-icons heart">favorie_border</i>
                <span class="content">입력한 내용</span>
                <span class="manage"> <i class="material-icons done">done</i> <i class="material-icons clear">clear</i> </span>
            </li> -->
        </ul>
    </section>

    <script>
        
        document.addEventListener("keyup", function(event) {

            let ul태그 = document.querySelector(".todo-list")
            let 박스 = document.querySelector("#input-box")
            

            if (event.key == "Enter") {
                // li태그 만들기
                let li태그 = document.createElement("li")

                // 하트 추가
                let 하트
                하트 = document.createElement("i") // i태그 만들기 - document.createElement
                하트.innerHTML = "favorite_border" // i태그에 favorie_border 넣어주기
                하트.classList.add("material-icons") // class 추가하기
                하트.classList.add("heart")
                li태그.appendChild(하트) // 하트를 li 태그 내에 추가하기
                console.log(하트)

                하트.addEventListener("click", function() {
                    if (하트.textContent == "favorite_border") { // 하트가 비워진 경우
                        하트.textContent = "favorite" // 하트 채운다
                    }
                    else { // 하트가 채워진 경우
                        하트.textContent = "favorite_border" // 하트 비운다
                    }
                })

                // 내용 추가
                let 내용
                내용 = document.createElement("span")
                내용.classList.add("content")
                내용.textContent = 박스.value
                박스.value = "" // input박스 비우기
                li태그.appendChild(내용)

                // v x 묶고 있는 span태그 추가
                let 묶음 
                묶음 = document.createElement("span")
                묶음.classList.add("manage")
                // 그 안에 v추가
                let v 
                v = document.createElement("i")
                v.classList.add("material-icons")
                v.classList.add("done")
                v.textContent = "done"
                묶음.appendChild(v)

                v.addEventListener("click", function () {
                    내용.style.color = "gray"
                    내용.style.textDecoration = "line-through"
                    묶음.removeChild(v)
                })


                // x추가
                let x
                x = document.createElement("i")
                x.classList.add("material-icons")
                x.classList.add("clear")
                x.textContent = "clear"
                묶음.appendChild(x)

                x.addEventListener("click", function () {
                    ul태그.removeChild(li태그)
                })
                
                li태그.appendChild(묶음) // span태그를 li에 추가

                // li 태그를 ul에 추가하기
                ul태그.appendChild(li태그)
            }
        })
 
        
    </script>
</body>
</html>

0개의 댓글