URECA-ReCoder · cabrerainbu · Aug 21, 2024 · Aug 21, 2024 · Aug 26, 2024 · Aug 26, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -8,7 +8,23 @@
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <div class="header-wrapper">
+        <header>📚 투두리스트</header>
+        <form class="input-box">
+          <input id="todo-input" type="text" placeholder="할 일을 입력하세요" />
+          <button id="add-todo-btn">➕</button>
+        </form>
+      </div>
+      <div class="body">
+        <h4 id="todo-list-title">📋 TO DO ()</h4>
+        <ul id="todo-list"></ul>
+      </div>
+      <div class="footer">
+        <h4 id="done-todo-list-title">💿 DONE ()</h4>
+        <ul id="done-todo-list"></ul>
+      </div>
+    </div>
   </body>
-  <script src="script.js"></script>
+  <script src="script copy.js"></script>
 </html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,117 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/script.js b/script.js
@@ -1 +1,77 @@
-// 다들 화이팅!! ٩( *˙0˙*)۶
+const todoInput = document.getElementById('todo-input'); // 할 일 입력창
+const todoList = document.getElementById('todo-list'); // 할 일 리스트창
+const addTodoBtn = document.getElementById('add-todo-btn'); // 버튼
+const doneTodoList = document.getElementById('done-todo-list'); // 완료된 할 일 리스트창
+const todoListTitle = document.getElementById('todo-list-title'); // 할 일 제목
+const doneTodoListTitle = document.getElementById('done-todo-list-title'); // 완료된 할 일 제목
+
+// input으로 입력 받은 할 일을 리스트창에 추가
+function addTodo(event) {
+  event.preventDefault(); // form 태그의 기본 새로고침 기능 지우기
+
+  const $li = document.createElement('li');
+  const $btn = document.createElement('button');
+
+  const todoText = todoInput.value.trim();
+
+  //공백 방지
+  if (!todoText) {
+    alert('공백은 입력할 수 없습니다.');
+  }
+
+  $li.innerText = todoText;
+  todoList.appendChild($li);
+  todoInput.value = ''; // 입력 필드 초기화
+  todoInput.focus(); // 입력 필드로 커서 이동
+
+  $li.appendChild($btn);
+  $btn.innerText = '❌';
+
+  // 삭제 버튼 클릭 시 해당 li 삭제
+  $btn.addEventListener('click', (e) => {
+    e.stopPropagation(); // 이벤트 전파 막기 -> li태그의 자식요소로 삭제버튼이 있기 때문에 버튼을 눌러도 완료항목으로 이동하는 문제발생
+    removeTodo(li, true);
+  });
+  todoFlagCount(true);
+
+  $li.addEventListener('click', () => doneTodo($li));
+}
+
+addTodoBtn.addEventListener('click', addTodo);
+
+// 완료
+function doneTodo(liItem) {
+  let doneLi = document.createElement('li');
+  let doneBtn = document.createElement('button');
+
+  doneLi.innerText = liItem.innerText.replace('❌', ''); // *텍스트만 가져오기*
+  doneTodoList.appendChild(doneLi);
+
+  doneBtn.innerText = '❌';
+  doneLi.appendChild(doneBtn);
+
+  doneBtn.addEventListener('click', () => {
+    removeTodo(doneLi, false);
+  });
+  // 원래 todo 목록에서 삭제
+  liItem.remove();
+  todoFlagCount(true);
+  todoFlagCount(false);
+}
+
+// 할 일 삭제
+function removeTodo(liItem, isTodo) {
+  liItem.remove();
+  todoFlagCount(isTodo);
+}
+
+// 할 일 개수 업데이트
+function todoFlagCount(isTodo) {
-function todoFlagCount(isTodo) {
+function todoFlagCount({ isTodo }) { ... }
+todoFlagCount({ isTodo: true });
+todoFlagCount({ isTodo: false });
-function todoFlagCount(isTodo) {
+function todoFlagCount({ isTodo }) { ... }
+todoFlagCount({ isTodo: true });
+todoFlagCount({ isTodo: false });
+  if (isTodo) {
+    let count = todoList.getElementsByTagName('li').length;
+    todoListTitle.innerText = `📋 TO DO (${count})`;
+  } else {
+    let count = doneTodoList.getElementsByTagName('li').length;
+    doneTodoListTitle.innerText = `💿 DONE (${count})`;
+  }
+}
diff --git a/style.css b/style.css
@@ -1 +1,94 @@
-/* 자유롭게 디자인 해 주세요! */
+@import './reset.css';
+
+* {
+  font-family: 'SpoqaHanSansNeo-Regular';
+}
+html,
+body {
+  margin: 0;
+}
+body {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(#e66465, #9198e5);
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 360px;
+  height: 600px;
+  border-radius: 20px;
+  background-color: white;
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
+}
+.header-wrapper {
+  flex-direction: row;
+}
+header {
+  margin: 5% 5% 0;
+  font-size: 24px;
+}
+.input-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid lightgray;
+  padding: 5%;
+}
+#todo-input {
+  width: 80%;
+  height: 60%;
+  margin: 1%;
+  padding: 5%;
+  border: 0.5px solid gray;
+  border-radius: 15px;
+}
+#add-todo-btn {
+  height: 60%;
+  margin: 1%;
+  border: 0px;
+  background-color: transparent;
+  cursor: pointer;
+}
+.body {
+  height: 40%;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid lightgray;
+}
+#todo-list-title {
+  margin: 18px;
+}
+.footer {
+  height: 40%;
+  display: flex;
+  flex-direction: column;
+}
+#done-todo-list-title {
+  margin: 18px;
+}
+
+ul {
+  height: 70%;
+  overflow: auto;
+
+  padding-left: 40px;
+}
+
+li {
+  margin: 0 16px 16px;
+}
+
+#done-todo-list:nth-child(2) {
+  color: lightgray;
+  text-decoration: line-through;
+}
+
+li > button {
+  margin-left: 10px;
+  background: transparent;
+  border: 0px;
+}