[1주차] 이규호 미션 제출합니다.

index.html

@@ -21,19 +21,9 @@
           <input id="addTodo" type="text" placeholder=" Add TODO">
           <button id="plusButton">+</button>
         </div>
-        <div class="todoCard">
-          <div class="todoElem">운동하기</div>
-          <input type="checkbox">
+        <div class="todoCards">
+        <!--여기에 todolist 추가-->
         </div>
-        <div class="todoCard">
-          <div class="todoElem">밥먹기</div>
-          <input type="checkbox">
-        </div>
-        <div class="todoCard">
-          <div class="todoElem">공부하기</div>
-          <input type="checkbox">
-        </div>
-        <!-- 미구현 -->
       </div>
     </div>
   </body>

script.js

@@ -1,12 +1,66 @@
-const addTodo = document.getElementById('addTodo');
-const plusButton = document.getElementById('plusButton');
+const addTodoInput = document.getElementById('addTodo'); //add todo input
+const plusButton = document.getElementById('plusButton'); //plusbutton press
+const clockTarget = document.getElementById("clock-js"); //clock
 
-plusButton.addEventListener('click',()=>{
-    console.log("clicked");
-})
+function addTodo(){
+    const todoText = addTodoInput.value.trim();
+    if(todoText==""){
+        alert("TODO를 입력하세요.");
+        return;
+    }
+    else if(todoText.length > 80){
+        alert("80자 이하로 입력해주세요.");
+        return;
+    }
+    //todo card 추가
+    const todoCards= document.querySelector(".todoCards");
+    const todoCard = document.createElement("div");
+    todoCard.classList.add("todoCard");
+
+    const todoElem = document.createElement("div");
+    todoElem.classList.add("todoElem");
+    todoElem.textContent = todoText;
+
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+
+    const todoDelete = document.createElement("button");
+    todoDelete.classList.add("todoDelete");
+    todoDelete.textContent = "X";
+
+    todoCard.appendChild(todoElem);
+    todoCard.appendChild(checkbox);
+    todoCard.appendChild(todoDelete);
 
+    todoCards.appendChild(todoCard);
+
+    addTodoInput.value="";
+}
+function handleClick(event){//click 핸들러
+    const clickedElement = event.target;
+    if(clickedElement.classList.contains("todoDelete")){
+        deleteTodo(clickedElement);
+    }
+    else if(clickedElement.classList.contains("checkbox")){
+        //체크박스 시 밑으로 내리기(local로 처리하든 정렬해야될듯)
+    }
+}
+function deleteTodo(deleteButton){//Todo 지움
+    const todoCard = deleteButton.parentElement;
+    const todoCards = document.querySelector(".todoCards");
+    todoCards.removeChild(todoCard);
+}
+//plusButton과 add Todo enter 클릭 이벤트 핸들러
+plusButton.addEventListener('click',addTodo);
+addTodoInput.addEventListener("keyup", (e)=>{
+    if(e.key === "Enter"){
+        addTodo();
+    }
+})
+//deleteButton 이벤트핸들러
+const todoCards = document.querySelector(".todoCards");
+todoCards.addEventListener("click",handleClick);
 // clock 출력
-const clockTarget = document.getElementById("clock-js");
 function clock(){
     const date = new Date();
     const month = date.getMonth();

style.css

@@ -68,7 +68,8 @@ input[type=text]{/*input 태그 따로 설정*/
     color : black;
     display:flex; /*todoElem 세로축 가운데 정렬*/
     align-items:center;
-    justify-content:space-between;/*item 사이 간격 균일하게*/
+    justify-content:space-between;
+    /* item 사이 간격 균일하게 */
     height: 100px;
     margin : 5px 0;
     border-radius: 8px;
@@ -77,5 +78,16 @@ input[type=text]{/*input 태그 따로 설정*/
     padding-left:30px;
 }
 input[type=checkbox]{
-    margin-right: 25px;
+    margin-right: -300px;
+}
+.todoDelete{
+    border: none;
+    margin-bottom: 80px;
+    margin-right: 5px;
+    font-size: 7px;
+    border-radius: 2px;
+    transition : background-color 0.3s;
+}
+.todoDelete:hover{
+    background-color: #b1b1b1;
 }