Merge pull request #46 from Konkuk-KUIT/hwanggyuun

3주차 실습 성공

Author: Turtle-Hwan

week3/gyuun/todo/app.js

@@ -0,0 +1,108 @@
+const todoListEl = document.getElementById("todoList");
+const todoInputEl = document.getElementById("todoInput");
+
+const API_URL = "http://localhost:3000/todos";
+
+fetch(API_URL)
+  .then((response) => response.json())
+  .then((data) => renderTodo(data));
+
+const updateTodo = (todoId, originalTitle) => {
+  const todoItem = document.querySelector(`#todo-${todoId}`);
+  const inputli = document.createElement("input");
+  inputli.type = "text";
+  inputli.value = originalTitle;
+
+  todoItem.innerHTML = ""; // 기존 내용을 삭제
+  todoItem.appendChild(inputli); 
+  // todoItem.innerHTML("");
+  // todoItem.append(inputli);
+  // const  updatedTodo = {
+  //   title : inputli.value,
+  
+  // };
+
+  
+  inputli.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+          fetch(API_URL + "/" + todoId, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            title : inputli.value,
+          }),
+        })
+          .then((response) => response.json())
+          .then(() => {
+            return fetch(API_URL);
+          })
+          .then((response) => response.json())
+          .then((data) => renderTodo(data));
+      }
+      });
+ 
+};
+
+const renderTodo = (newTodos) => {
+  todoListEl.innerHTML = "";
+  newTodos.forEach((todo) => {
+    const listEl = document.createElement("li");
+    listEl.textContent = todo.title;
+    listEl.id = `todo-${todo.id}`;
+
+    const deleteEl = document.createElement("span");
+    deleteEl.textContent = "🗑️";
+    deleteEl.onclick = () => deleteTodo(todo.id);
+
+    const udpateEl = document.createElement("span");
+    udpateEl.textContent = "✏️";
+    udpateEl.onclick = () => updateTodo(todo.id, todo.title);
+
+    listEl.append(deleteEl);
+    listEl.append(udpateEl);
+    todoListEl.append(listEl);
+  });
+};
+
+const addTodo = () => {
+  const title = todoInputEl.value;
+  const date = new Date();
+  const createdAt = date.toDateString();
+
+  if (!title) return;
+
+  const newTodo = {
+    id: date.getTime(),
+    title,
+    createdAt,
+  };
+
+  fetch(API_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ ...newTodo, completed: false }),
+  })
+    .then((response) => response.json())
+    .then(() => {
+      todoInputEl.value = "";
+      return fetch(API_URL);
+    })
+    .then((response) => response.json())
+    .then((data) => renderTodo(data));
+};
+
+const deleteTodo = (todoId) => {
+  fetch(API_URL + "/" + todoId, {
+    method: "DELETE",
+  })
+    .then(() => fetch(API_URL))
+    .then((response) => response.json())
+    .then((data) => renderTodo(data))
+    .catch(error=>(
+      console.log(error)
+    ))
+};

week3/gyuun/todo/db.json

@@ -0,0 +1,10 @@
+{
+  "todos": [
+    {
+      "id": 1727783920822,
+      "title": "ㅜㅜㅜㅜ드디어",
+      "createdAt": "Tue Oct 01 2024",
+      "completed": false
+    }
+  ]
+}

week3/gyuun/todo/index.css

@@ -0,0 +1,60 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  background-color: #f5f5f5;
+  font-family: "Arial", sans-serif;
+}
+.app {
+  width: 400px;
+  margin: 30px auto;
+  background-color: #fff;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.header {
+  font-size: 1.5em;
+  margin-bottom: 20px;
+  text-align: center;
+}
+.inputContainer {
+  display: flex;
+}
+#todoInput {
+  flex: 1;
+  padding: 10px;
+  font-size: 1em;
+  border: 1px solid #ddd;
+}
+button {
+  background-color: #28a745;
+  color: #fff;
+  padding: 10px;
+  font-size: 1em;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #218838;
+}
+ul {
+  list-style-type: none;
+}
+li {
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+li:last-child {
+  border-bottom: none;
+}
+.deleteBtn {
+  cursor: pointer;
+  color: #ff0000;
+}
+.deleteBtn:hover {
+  text-decoration: underline;
+}

week3/gyuun/todo/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Todo App</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div class="app">
+      <div class="header">My Todos</div>
+      <div class="inputContainer">
+        <input id="todoInput" placeholder="What needs to be done?" />
+        <button onclick="addTodo()">Add</button>
+      </div>
+      <ul id="todoList"></ul>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>