Merge pull request #49 from Konkuk-KUIT/jiyeKa

[3주차] updateTodo 미션

Author: Turtle-Hwan

week3/jiyeKa/todo/app.js

@@ -0,0 +1,138 @@
+const todoListEl = document.getElementById("todoList");
+const todoInputEl = document.getElementById("todoInput");
+
+const API_URL = "http://localhost:8080/todos";
+
+fetch(API_URL)
+  .then((response) => response.json())
+  .then((data) => renderTodo(data));
+
+let currentUpdateId = null;
+document.getElementById("todoInput").focus();
+
+const updateTodo = (todoId, originalTitle) => {
+
+  // 이미 수정중인 항목이 있으면 다른 항목 ✏️ 클릭 불가능
+  if(currentUpdateId!=null && currentUpdateId!=todoId) return;
+  
+  // 현재 수정중인 항목의 아이디 기록
+  currentUpdateId=todoId;
+  const todoItem = document.querySelector(`#todo-${todoId}`);
+
+  // 기존 내용 삭제 후 input & SaveBtn 생성
+  todoItem.innerHTML = "";
+
+  const inputEl = document.createElement("input");
+  inputEl.id="inputEl";
+  inputEl.type = "text";
+  inputEl.value = originalTitle;
+  const saveBtn = document.createElement("button");
+  saveBtn.textContent = "Save";
+
+  // Button 스타일 변경
+  saveBtn.style.cssText = 
+  "background-color: white; color: black; font-size: 0.7em; padding: 5px;";
+  
+  todoItem.appendChild(inputEl);
+  todoItem.appendChild(saveBtn);
+
+  // ✏️클릭 시 커서 위치 자동 포커스
+  document.getElementById("inputEl").focus();
+
+  // saveBtn 클릭 시 title 업데이트
+  saveBtn.onclick = () => {
+    const updatedTitle = inputEl.value;
+
+    fetch(API_URL + "/" + todoId, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ title: updatedTitle }),
+    })
+    .then(() => {
+      return fetch(API_URL);
+    })
+    .then((response) => response.json())
+    .then((data) => { 
+      renderTodo(data);
+      currentUpdateId=null;
+    });
+  };
+
+  // 엔터키 입력시 수정 Save 가능
+  document.getElementById("inputEl").addEventListener('keydown',function(event){
+    if(event.key === 'Enter'){
+      saveBtn.onclick();
+    }
+  });
+  
+};
+
+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 updateEl = document.createElement("span");
+    updateEl.textContent = "✏️";
+    updateEl.onclick = () => updateTodo(todo.id, todo.title);
+
+    listEl.append(deleteEl);
+    listEl.append(updateEl);
+    todoListEl.append(listEl);
+  });
+};
+
+
+// 엔터키 입력 시 add 가능하도록
+document.getElementById("todoInput").addEventListener('keydown',function(event){
+  if(event.key == "Enter"){
+    addTodo();
+  }
+});
+
+
+const addTodo = () => {
+  const title = todoInputEl.value;
+  const date = new Date();
+  const createdAt = date.toDateString();
+
+  if (!title) return;
+
+  const newTodo = {
+    id: date.getTime().toString(),
+    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));
+};

week3/jiyeKa/todo/db.json

@@ -0,0 +1,16 @@
+{
+  "todos": [
+    {
+      "id": "1727956553018",
+      "title": "하이하이",
+      "createdAt": "Thu Oct 03 2024",
+      "completed": false
+    },
+    {
+      "id": "1727956560017",
+      "title": "끗",
+      "createdAt": "Thu Oct 03 2024",
+      "completed": false
+    }
+  ]
+}

week3/jiyeKa/todo/index.css

@@ -0,0 +1,61 @@
+* {
+    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/jiyeKa/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>