asac-assignments · ohofront · Dec 10, 2024 · Dec 10, 2024 · Dec 10, 2024 · Dec 10, 2024
diff --git a/simple.html b/simple.html
diff --git a/simple/index.css b/simple/index.css
@@ -0,0 +1,67 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+#todo-list {
+  padding: 10;
+}
+
+#todo-list li {
+  margin: 5px 0;
+}
+
+.todo-input {
+  margin-top: 10px;
+  padding: 8px;
+  font-size: 16px;
+  border-radius: 10px;
+  box-shadow: 2px 3px 5px 0px;
+  border: none;
+}
+
+.save-button {
+  padding: 8px 16px;
+  border-radius: 10px;
+  margin-left: 10px;
+  cursor: pointer;
+  box-shadow: 2px 3px 5px 0px;
+  border: none;
+}
+
+#modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 1px 2px 5px 0px;
+  text-align: center;
+}
+
+button {
+  margin: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 10px;
+  box-shadow: 1px 2px 1px 0px;
+}
diff --git a/simple/index.html b/simple/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Simple TODO List</title>
+    <link rel="stylesheet" href="/simple/index.css" />
+  </head>
+  <body>
+    <section id="container">
+      <h1 class="title">TODO</h1>
+      <div class="input-container">
+        <input type="text" class="todo-input" id="todo-input" />
+        <input
+          type="button"
+          value="저장"
+          class="save-button"
+          id="save-button"
+        />
+      </div>
+      <div class="list-container">
+        <ul id="todo-list" class="todo-list"></ul>
+      </div>
+      <!-- 모달-->
+      <div id="modal" class="hidden">
+        <div class="modal-content">
+          <p>"<span id="task-name"></span>" 저장하시겠습니까?</p>
+          <button id="cancel-button">취소</button>
+          <button id="confirm-button">확인</button>
+        </div>
+      </div>
+    </section>
+    <script src="/simple/index.js"></script>
+  </body>
+</html>
diff --git a/simple/index.js b/simple/index.js
@@ -0,0 +1,41 @@
+/* geElementbyId: id 속성을 사용해 해당태그에 접근 */
+/* addEventListener: 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정 */
+/**
+ * 저장 버튼 클릭시
+ * todo-input에 있는 값을 input 이라는 변수에 저장
+ * input이 있을경우 task-name를 갖고 있는 노드와 그 자손의 텍스트 콘텐츠에 저장
+ * input이 없을경우 modal을 hidden 속성을 제거
+ */
+document.getElementById("save-button").addEventListener("click", () => {
+  const input = document.getElementById("todo-input").value.trim();
+  if (input) {
+    document.getElementById("task-name").textContent = input;
+    document.getElementById("modal").classList.remove("hidden");
+  } else {
+    alert("할 일을 입력하세요.");
+  }
+});
+
+/* 취소 버튼 누를경우 modal에 hidden 속성 추가 */
+document.getElementById("cancel-button").addEventListener("click", () => {
+  document.getElementById("modal").classList.add("hidden");
+});
+
+/* 확인버튼 누를경우
+  task-name의 textContent를 task 변수에 대입
+  todo-list의 id를 가진 속성의 값을 todoList라는 변수에 대입
+  createElement를 통해 li라는 HTML요소를 만들어 listItem에 반환
+  task-name의 textContent를 listItem의 textContent에 대입
+  todoList의 appendChild를 통해 자식 노드 객체인 listItem 추가
+  modal에는 hidden속성을 부여해 사라지게 함
+  todo-input 값은 초기화
+*/
+document.getElementById("confirm-button").addEventListener("click", () => {
+  const todoList = document.getElementById("todo-list");
+  const listItem = document.createElement("li");
+  listItem.textContent = document.getElementById("task-name").textContent;
+  todoList.appendChild(listItem);
+
+  document.getElementById("modal").classList.add("hidden");
+  document.getElementById("todo-input").value = "";
+});