Merge pull request #45 from Konkuk-KUIT/junghyun

[3주차] updateTodo 미션

Author: Turtle-Hwan

week3/junghyun/es6/index.js

@@ -0,0 +1,18 @@
+const arr = [-3, -2, -1, 0, 1, 2, 3];
+
+const arr1 = arr.map((value, index) => {
+  return value * 2;
+});
+
+const arr2 = arr.filter((value) => {
+  return value > 0;
+});
+
+const arr3 = arr.reduce((prevValue, currValue) => {
+  console.log(prevValue, currValue);
+  return prevValue + currValue;
+});
+
+console.log(arr1);
+console.log(arr2);
+console.log(arr3);

week3/junghyun/todo/app.js

@@ -0,0 +1,111 @@
+const todoInputEl = document.getElementById("todoInput");
+const todoListEl = document.getElementById("todoList");
+
+const API_URL = "http://localhost:8080/todos";
+fetch(API_URL)
+    .then((response) => response.json())
+    .then((data) => renderTodo(data));
+
+const updateTodo = (todoId, originalTitle) => {
+    const todoItem = document.querySelector(`#todo-${todoId}`);
+    // mission
+    const inputEl = document.createElement("input");
+    inputEl.value = originalTitle;
+
+    const editBtn = document.createElement("button");
+    editBtn.textContent = "Edit";
+
+    editBtn.onclick = () => {
+        const updatedTitle = inputEl.value;
+        const date = new Date();
+        const createdAt = date.toDateString();
+
+        if (!updatedTitle) return;
+
+        const updatedTodo = {
+            id: date.getTime().toString(),
+            title: updatedTitle,
+            createdAt,
+        };
+        
+        fetch(API_URL+"/"+todoId, {
+            method: "PATCH",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ ...updatedTodo, completed: false}),
+        })
+            .then((response) => response.json())
+            .then(() => {
+                todoInputEl.value = "";
+                return fetch(API_URL);
+            })
+            .then((response) => response.json())
+            .then((data) => renderTodo(data));
+    };
+
+    todoItem.innerHTML = "";
+    todoItem.appendChild(inputEl);
+    todoItem.appendChild(editBtn);
+};
+
+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.className = "deleteBtn";
+        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().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/junghyun/todo/db.json

@@ -0,0 +1,28 @@
+{
+  "todos": [
+    {
+      "id": "1727766228534",
+      "title": "고",
+      "createdAt": "Tue Oct 01 2024",
+      "completed": false
+    },
+    {
+      "id": "1727766232631",
+      "title": "정",
+      "createdAt": "Tue Oct 01 2024",
+      "completed": false
+    },
+    {
+      "id": "1727766236314",
+      "title": "현's",
+      "createdAt": "Tue Oct 01 2024",
+      "completed": false
+    },
+    {
+      "id": "1727766241171",
+      "title": "todos",
+      "createdAt": "Tue Oct 01 2024",
+      "completed": false
+    }
+  ]
+}

week3/junghyun/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/junghyun/todo/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Todo App</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div class="app">
+      <div class="header">gjh 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>