[1단계 - todo list] 춘식(안예장) 미션 제출합니다.

README.md

@@ -1,39 +1,11 @@
-<p align="middle" >
-  <img width="200px;" src="./src/images/check_list.png"/>
-</p>
-<h2 align="middle">JS 투두리스트 스텝1</h2>
-<p align="middle">자바스크립트로 구현 하는 투두리스트</p>
-<p align="middle">
-  <img src="https://img.shields.io/badge/version-1.0.0-blue?style=flat-square" alt="template version"/>
-  <img src="https://img.shields.io/badge/language-html-red.svg?style=flat-square"/>
-  <img src="https://img.shields.io/badge/language-css-blue.svg?style=flat-square"/>
-  <img src="https://img.shields.io/badge/language-js-yellow.svg?style=flat-square"/>
-  <a href="https://github.com/daybrush/moveable/blob/master/LICENSE" target="_blank">
-    <img src="https://img.shields.io/github/license/woowacourse/javascript-lotto.svg?style=flat-square&label=license&color=08CE5D"/>
-  </a>
-</p>
-
-## 🔥 Projects!
-
-<p align="middle">
-  <img width="400" src="./src/images/sample.gif">
-</p>
-
-<p align="middle">
-  <a href="https://next-step.github.io/js-todo-list-step1/">🖥️ 데모 링크</a>
-</p>
-
-<br/>
-
 ## 🎯 요구사항
 
-- [ ] todo list에 todoItem을 키보드로 입력하여 추가하기
-- [ ] todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
-- [ ] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
-- [ ] todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
-- [ ] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
-- [ ] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
-- [ ] localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함
+- [X] todo list에 todoItem을 키보드로 입력하여 추가하기
+- [X] todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
+- [X] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
+- [X] todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
+- [X] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
+- [X] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
 
 <br/>
 
@@ -68,38 +40,3 @@
 </ul>
 ```
 
-<br/>
-
-## ⚙️ Before Started
-
-#### <img alt="Tip" src="https://img.shields.io/static/v1.svg?label=&message=Tip&style=flat-square&color=673ab8"> 로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법
-
-로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 `npm install` 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.
-
-```
-npm install -g live-server
-```
-
-실행은 아래의 커맨드로 할 수 있습니다.
-
-```
-live-server 폴더명
-```
-
-<br>
-
-## 👏 Contributing
-
-만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.
-
-<br>
-
-## 🐞 Bug Report
-
-버그를 발견한다면, [Issues](https://github.com/woowacourse/js-todo-list-step1/issues)에 등록해주세요.
-
-<br>
-
-## 📝 License
-
-This project is [MIT](https://github.com/woowacourse/js-todo-list-step1/blob/main/LICENSE) licensed.

index.html

@@ -22,7 +22,7 @@ <h1>TODOS</h1>
           <span class="todo-count">총 <strong>0</strong> 개</span>
           <ul class="filters">
             <li>
-              <a class="all selected" href="/#">전체보기</a>
+              <a class="all selected" href="#">전체보기</a>
             </li>
             <li>
               <a class="active" href="#active">해야할 일</a>
@@ -34,5 +34,6 @@ <h1>TODOS</h1>
         </div>
       </main>
     </div>
+  <script type="module" src="./src/App.js"></script>
   </body>
 </html>

src/App.js

@@ -0,0 +1,14 @@
+import addItem from "./todo/AddItem.js";
+import checkItem from "./todo/CheckItem.js";
+import editItem from "./todo/EditItem.js";
+import filterItem from "./todo/filterItem.js";
+import { EVENTS } from "./todo/constants.js";
+
+const $todoInput = document.querySelector("#new-todo-title");
+const $todoList = document.querySelector("#todo-list");
+const $filterList = document.querySelector(".filters");
+
+$todoInput.addEventListener(EVENTS.KEY_UP, addItem.onAddTodoItem);
+$todoList.addEventListener(EVENTS.MOUSE_UP, checkItem.onCheckToDoItem);
+$todoList.addEventListener(EVENTS.DOUBLE_CLICK, editItem.onEditTodoItem);
+$filterList.addEventListener(EVENTS.CLICK, filterItem.onFilterToDoItem);

src/MiniMission/BOM.js

@@ -0,0 +1,18 @@
+let join_bt = document.getElementById('join-button');
+let exit_bt = document.getElementById('exit-button');
+
+join_bt.onclick = function () {
+  let answer = prompt("토끼가 좋아하는 채소는?", '');
+  if (answer === "당근") {
+    alert("환영합니다.");
+    return;
+  }
+  alert("모르면 못 들어옵니다.");
+}
+
+exit_bt.onclick = function () {
+  let exitGame = confirm("게임을 종료하시겠습니까?");
+  if (exitGame) {
+    alert("방에서 나갔습니다.");
+  }
+}

src/MiniMission/DOM.js

@@ -0,0 +1,3 @@
+let newYork = document.createElement('li');
+newYork.innerText = "뉴욕";
+document.getElementById('wrap').lastElementChild.append(newYork);

src/MiniMission/EVENT.js

@@ -0,0 +1,31 @@
+/*
+const $todoInput = document.querySelector("#new-todo-title");
+
+$todoInput.addEventListener("keyup", onAddTodoItem);
+document.getElementById("todo-list").addEventListener("click", onToggleTodoItem); // 바뀐 부분
+
+function onAddTodoItem(event) {
+const todoTitle = event.target.value;
+const todoList = document.getElementById("todo-list");
+if (event.key === "Enter" && todoTitle !== "") {
+todoList.insertAdjacentHTML("beforeend", renderTodoItemTemplate(todoTitle));
+event.target.value = "";
+}
+}
+
+function onToggleTodoItem(event) {
+event.target.closest("li").classList.toggle("completed");
+}
+
+function renderTodoItemTemplate(title) {
+return `
+<li>
+  <div class="view">
+    <input class="toggle" type="checkbox">
+    <label class="label">${title}</label>
+    <button class="destroy"></button>
+  </div>
+  <input class="edit" value="새로운 타이틀">
+</li>`;
+}
+*/