🎨 to-do-list

kirin.log·2021년 3월 9일

🪐 logic

input에 글을 쓰고 button을 누른다
input.value가 <ul>안의 <li>로 생성된다
input창은 defalt가 된다
❌ 버튼을 누르면 해당 리스트가 삭제된다

🎃 html

<!DOCTYPE html>
<html lang="en">
    <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>to-do-list</title>
        <link href="index.css" rel="stylesheet" />
        <script defer src="index.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>To-Do-List</h1>
            <div class="inputContainer">
                <input type="text" placeholder="Write your list..." />
                <button>Write</button>
            </div>
            <ul></ul>
        </div>
    </body>
</html>

🎃 css

* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(to right, skyblue, orange);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 350px;
    height: 70vh;
    border: 2px solid coral;
}

.inputContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

input {
    width: 90%;
}

ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    margin: 0;
    list-style: none;
}

li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.error {
    border: 2px solid red;
}

🎃 js

const input = document.querySelector("input");
const btn = document.querySelector("button");
const ul = document.querySelector("ul");

// 버튼을 클릭하면 입력-출력 이벤트 발생
btn.addEventListener("click", (e) => {
    // input값은 변수화 해준다
    let txt = input.value;

    let li = document.createElement("li");
    // input값이 없을 경우 error창 뜨도록
    if (txt < 1) {
        input.classList.add("error");
    } 
    // input값 있을 경우, 리스트 생성 및 input창에 값 삭제
    else {
        ul.appendChild(li);
        li.innerHTML = `${txt}  <button class="delBtn">❌</button>`;
        input.value = "";
        input.classList.remove("error");
    }

    // delBtn은 해당 블럭(btn.addEventListener) 안에서 생성했기 때문에, 같은 영역 내에서 지정 
    delBtn = document.querySelectorAll(".delBtn");

    // delBtn은 복수(=배열)이다. (여러개 생성 가능)
    delBtn[delBtn.length - 1].addEventListener("click", (e) => {

        // ul에서 li를 지워준다(e.target.parentElement = li)
        ul.removeChild(e.target.parentElement);
    });
});

kirin.log

boma91@gmail.com

이전 포스트

동기 vs 비동기 (3) - async/ await

다음 포스트

🎨 form-validator

1개의 댓글

Jane

2021년 3월 9일

새봄님! 사용하신 이모지들이 너무 귀엽네요ㅋㅋㅋ 전 자바스크립트 다 까먹었어여...ㅎㅎ

답글 달기