개발 노트

투두리스트 html,css,js 본문

JavaScript

투두리스트 html,css,js

알 수 없는 사용자 2022. 1. 3. 12:50 
<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
  </head>
  <body></body>
</html>
* {
  box-sizing: border-box;
  margin: 10px;
  justify-content: center;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

button {
  cursor: pointer;

  padding: 10;
}

div {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

input {
  border-radius: 10px;
}

form {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

#testID {
  color: #4646b4;
  background: #aba8f4;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#checkbox {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
document.addEventListener("DOMContentLoaded", () => {
  const addTodo = () => {
    if (input.value !== "") {
      const div = document.createElement("div");
      document.body.appendChild(div);

      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.id = "checkbox";
      checkbox.addEventListener("change", () => {
        if (checkbox.checked) {
          div.style.textDecoration = "line-through";
        } else {
          div.style.textDecoration = "";
        }
      });
      div.appendChild(checkbox);

      const span = document.createElement("span");
      span.textContent = input.value;
      input.value = "";
      div.appendChild(span);

      const today = new Date();

      const p = document.createElement("p");
      p.textContent =
        today.getHours() +
        "시" +
        today.getMinutes() +
        "분" +
        today.getSeconds() +
        "초";
      input.value = "";
      div.appendChild(p);

      const deleteButton = document.createElement("button");
      deleteButton.textContent = "제거하기";
      deleteButton.addEventListener("click", () => {
        div.parentNode.removeChild(div);
      });
      div.appendChild(deleteButton);
    }
  };

  const title = document.createElement("div");
  document.body.appendChild(title);
  title.id = "testID";

  const h1 = document.createElement("h1");
  h1.textContent = "할 일 목록";

  title.appendChild(h1);

  const form = document.createElement("div");
  document.body.appendChild(form);

  const input = document.createElement("input");
  input.addEventListener("keyup", (event) => {
    if (event.keyCode === 13) {
      addTodo();
    }
  });
  form.appendChild(input);

  const addButton = document.createElement("button");
  addButton.textContent = "추가하기";
  form.appendChild(addButton);

  addButton.addEventListener("click", () => {
    if (input.value !== "") {
      addTodo();
    }
  });
});
저작자표시

'JavaScript' 카테고리의 다른 글

사칙연산 연습문제 만들기  (0) 2022.01.07
사칙연산 사이트 만들기  (0) 2022.01.05
DOM은 무엇인가  (0) 2022.01.02
자바스크립트 객체  (0) 2022.01.01
[자바스크립트] 알림창코드, 함수연습코드  (0) 2021.12.31
'JavaScript' Related Articles more