URECA-ReCoder · jejukyj · Aug 24, 2024 · Aug 27, 2024 · Aug 27, 2024 · Aug 27, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/index.html b/index.html
@@ -8,7 +8,33 @@
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <section>
+        <span class="title">To Do List</span>
+        <form onsubmit="return false">
+          <input type="text" id="todo-input" placeholder="할 일을 입력하세요" />
+          <button id="add-button">+</button>
+        </form>
+      </section>
+
+      <div class="division-line"></div>
+
+      <section class="todo-box">
+        <span class="todo-list-title">📝 TO DO (0)</span>
+        <div class="todo-div">
+          <ul id="todo-list"></ul>
+        </div>
+      </section>
+
+      <div class="division-line"></div>
+
+      <section class="done-box">
+        <span class="done-list-title">✔️ DONE (0)</span>
+        <div class="done-div">
+          <ul id="done-list"></ul>
+        </div>
+      </section>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,57 @@
-// 다들 화이팅!! ٩( *˙0˙*)۶
+// 다들 화이팅!! ٩( *˙0˙*)۶
+const todoInput = document.querySelector('#todo-input'); //입력창
+const addBtn = document.querySelector('#add-button'); //+ 버튼
+const todoList = document.querySelector('#todo-list'); //TO DO
+const doneList = document.querySelector('#done-list'); //DONE
+const todoTitle = document.querySelector('.todo-box .todo-list-title'); // TO DO 제목
+const doneTitle = document.querySelector('.done-box .done-list-title'); // DONE 제목
+
+addBtn.addEventListener('click', () => {
+  //+ 버튼으로 추가
+  if (todoInput.value !== '') addToDo();
+});
+
+function addToDo() {
+  let todoContents = todoInput.value;
+
+  const li = document.createElement('li');
+  const span = document.createElement('span');
+  const btn = document.createElement('button');
+
+  li.appendChild(span); //appendChild() : 선택한 요소 안에 자식요소를 추가
+  li.appendChild(btn);
+
+  span.textContent = todoContents; //textContent : 노드 내의 모든 텍스트 추출
+  btn.textContent = '✖️';
+
+  todoList.appendChild(li);
+
+  todoInput.value = '';
+
+  updateCount();
+
+  //완료
+  span.addEventListener('click', () => {
+    li.classList.toggle('complete');
+    if (li.classList.contains('complete')) {
+      doneList.appendChild(li);
+    } else {
+      todoList.appendChild(li);
+    }
+    updateCount();
+  });
+
+  //삭제
+  btn.addEventListener('click', () => {
+    li.remove();
+    updateCount();
+  });
+}
+
+function updateCount() {
+  const todoCount = todoList.children.length;
+  const doneCount = doneList.children.length;
+
+  todoTitle.textContent = `📝 TO DO (${todoCount})`;
+  doneTitle.textContent = `✔️ DONE (${doneCount})`;
+}
diff --git a/style.css b/style.css
@@ -1 +1,133 @@
-/* 자유롭게 디자인 해 주세요! */
+/* 자유롭게 디자인 해 주세요! */
+@font-face {
+  font-family: 'LINESeedKR-Th';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Th.woff2')
+    format('woff2');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'LINESeedKR-Rg';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Rg.woff2')
+    format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'LINESeedKR-Bd';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Bd.woff2')
+    format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: linear-gradient(
+    to right,
+    rgb(176, 196, 222),
+    rgb(230, 239, 250)
+  );
+}
+
+.container {
+  width: 360px;
+  height: 500px;
+  border-radius: 20px;
+  padding: 30px 24px 24px 24px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  background-color: white;
+}
+
+span.title {
+  font-family: 'LINESeedKR-Bd';
+  font-size: 24px;
+  color: rgb(59, 59, 59);
+}
+
+span.todo-list-title,
+span.done-list-title {
+  font-family: 'LINESeedKR-Bd';
+  color: rgb(59, 59, 59);
+}
+
+.division-line {
+  border-top: 1px solid rgb(222, 222, 222);
+}
+
+.todo-box {
+  margin-top: 15px;
+}
+
+.done-box {
+  margin-top: 15px;
+}
+
+.todo-div {
+  height: 140px;
+  font-family: 'LINESeedKR-Rg';
+}
+
+.done-div {
+  height: 140px;
+}
+
+input {
+  width: 310px;
+  height: 40px;
+  border-radius: 30px;
+  border-style: solid;
+  border-width: 1.2px;
+  border-color: rgb(222, 222, 222);
+  font-size: 12px;
+  padding-left: 12px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+input:focus {
+  outline: none;
+  border-color: lightsteelblue;
+  transition: 0.2s;
+}
+
+button {
+  border: none;
+  width: 25px;
+  height: 40px;
+  font-size: 20px;
+  background-color: white;
+  cursor: pointer;
+}
+
+button:hover {
+  color: lightsteelblue;
+  transition: 0.2s;
+}
+
+ul li {
+  cursor: pointer;
+}
+
+#todo-list button {
+  width: 34px;
+  height: 20px;
+  font-size: 14px;
+}
+
+#done-list button {
+  width: 34px;
+  height: 20px;
+  font-size: 14px;
+}
+
+#done-list li.complete {
+  text-decoration: line-through;
+  color: rgb(222, 222, 222);
+}