[ JavaScript ] 간단한 Todo List 구현

발효홍삼 2022. 8. 5. 00:30

728x90

간단한 ToDO List를 구현해보자

<!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>TODO</title>
    <link rel="stylesheet" href="../css/style.css" />
  </head>
  <body>
    <section>
      <div class="background">
        <span class="title"><h3>My ToDos</h3></span>
        <!--main menu-->
        <section id="main_menu">
          <div>
            <div class="create_btn_container">
              <input type="text" id="inputBox" />
              <button
                class="create_btn"
                id="create_todo_btn"
                onclick="createToDO()"
              >
                Create To Do
              </button>
            </div>
            <div
              class="todo_list"
              id="todo_list"
              style="text-align: center"
            ></div>
          </div>
        </section>
      </div>
    </section>

    <script src="../js/script.js"></script>
  </body>
</html>

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul,
li {
  list-style: none;
}

body {
  background-color: beige;
}

#main_menu {
  display: block;
}
#create_menu {
  display: none;
}

.background {
  width: 50vw;
  height: 80vh;
  background-color: white;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 5px;
}

.title {
  text-align: center;
}

.create_btn_container {
  text-align: center;
  margin-top: 5vh;
}

.create_btn {
  background-color: skyblue;
  color: aliceblue;
  border-color: skyblue;
  border-radius: 3px;
  border: none;
  font-size: x-small;
}

.cancel_btn {
  background-color: white;
  border-color: white;
  border: none;
}

const inputBox = document.getElementById("inputBox");
const createBtn = document.getElementById("create_todo_btn");
const toDoList = document.getElementById("todo_list");

createBtn.addEventListener("click", function () {
  const list = document.createElement("li");

  //list 생성
  if (inputBox.value == " ") alert("내용을 입력해주세요");
  else {
    list.innerText = inputBox.value;
    toDoList.appendChild(list);
    inputBox.value = " ";
  }

  //list 체크
  list.addEventListener("click", function () {
    list.style.textDecoration = "line-through";
  });

  //list 삭제
  list.addEventListener("dblclick", function () {
    toDoList.removeChild(list);
  });
});

Local Storage를 이용해보고 싶었으나 아직 개념이 명확하게 잡히지 않아 사용하지 못하였다.

728x90

저작자표시 비영리 (새창열림)