YJ의 새벽

TodoList 연습 1( html,css,js ) 본문

WebFront_/TodoList

TodoList 연습 1( html,css,js )

YJDawn 2023. 4. 11. 19:07

 

 

 

 

 

 

 

---- 할일을 작성후 , Add 버튼을 누르면 ??

 

 

--- 체크리스트  check 했을때 .

 

 

 

---- Active 버튼 눌렀을때 !!   ( span 태그로 만듬 )

 

 

 

--- Complete 버튼 눌렀을때 !!!!

 

 

 

--- ALL 버튼 눌렀을떄 !!!

 

 

 

---- All Delete 눌렀을때 !!!

 

 

 

 

---  HTML   코드 . 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="todocss.css">
    
    <script src="https://code.jquery.com/jquery-3.6.0.js" 
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" 
    crossorigin="anonymous"></script>
    
</head>
<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <h1>To_Do List</h1>
      <section class="form1">
        <input type="text" placeholder="Add New To-Do" id="inputTodo">
        <button type="button" id = "addBtn">Add</button>
      </section>

      <ul class="todo-list" id ="todo-listId" >
      </ul>

      <div id = "footer">
        <span id = "countSpan">남은 할일 : </span>
        <span id = "countSpanInput"></span>
        <span id = "All">ALL</span>
        <span id = "Active">Active</span>
        <span id = "Complete">Complete</span>
        <button type="button" id="allDelete" > All Delete</button>
      </div>
    </div>
    
    <script src = "todojs.js"></script>
  </body>
</html>

 

 

 

 

---- CSS  코드 

body {
  font-family: sans-serif;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}
h1 {
  text-align: center;
  color: #333;
}
.form1 {
  display: flex;
  margin-bottom: 20px;
}
input[type="text"] {
  flex-grow: 1;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
}
#addBtn:hover {
  background-color: #444;
}
.todo-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.todo-list li button:hover {
  background-color: #d32f2f;
}
#footer{
  display:  flex;
  justify-content: right;
  margin-top: 20px;
}
#footer > button {
  padding: 6px;
  font-size: 14px;
  border-radius: 5px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}
#footer > button:hover{
  background-color: #444;
}
#countSpan{
  flex-grow: 0.4;
  margin: auto;
}
#countSpanInput{
  flex-grow: 10;
  margin: auto;
}
#All{
  flex-grow:3;
  text-align: center;
  cursor: pointer;
  margin: 15px;
  background-color: lightgray;
  width: 15px;
}
#Active{
  flex-grow:3;
  text-align: center; 
  cursor: pointer;
  margin: 15px;
  background-color: lightgray;
  width: 15px;
}
#Complete{
  flex-grow: 3;
  text-align: center;
  cursor: pointer;
  margin: 15px;
  background-color: lightgray;
  width: 30px;
}
#footer > span {
  font-size:12px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 5px;

}

/*  ---------------------------  */

.liContainer{
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.liSpan{
  flex-grow: 1;
  margin-left: 10px;
}
.liButton {
  padding: 7px;
  font-size: 13px;
  border-radius: 5px;
  border: none;
  background-color: #f44336;
  color: #fff;
  cursor: pointer;
  margin-left: 10px;
}
#addBtn{
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

 

 

 

 

----- JS 코드 

const addBtn = document.getElementById("addBtn");  // Add 버튼
const deleteBtn = document.getElementById("deleteBtn"); // Delete 버튼
const inputTodo = document.getElementById("inputTodo"); // inputTodo
let count=0;

addBtn.addEventListener("click",function(e){   // Add 버튼 눌렀을때 .
    if ( inputTodo.value=="" ) {
        alert("Todo를 써주세요 ~ ");
        inputTodo.focus();
        return false;
    }else{
    const li = document.createElement("li");
    li.classList.add("liContainer");  // li 생성

    const checkBox = document.createElement("input");
    checkBox.classList.add("check1");
    checkBox.setAttribute("type","checkbox"); // 체크박스 생성

    const span = document.createElement("span");
    span.classList.add("liSpan");  // span 생성

    const button = document.createElement("button");
    button.classList.add("liButton"); // button 생성
    button.innerText="Delete";

    span.innerText = inputTodo.value;   
    inputTodo.value="";
    inputTodo.focus();

    li.append(checkBox,span,button);
    document.querySelector(".todo-list").append(li);

    count++;
    updateCount();

    button.addEventListener("click",function(){    // Delete 눌렀을때 삭제
        this.parentElement.remove();
        if ( !checkBox.checked)
        count --;
        updateCount();
    
    });
    checkBox.addEventListener("click",function(){   // check 시 취소선
        if ( checkBox.checked ){
            span.style.textDecoration="line-through";
            span.style.color="gray";
            count--;
        }else{
            span.style.textDecoration= "none";
            span.style.color="black";
            count++;
        } 
        updateCount();
    });
    }   
    updateCount();
});


  /////////////////////  전체 삭제
const allDelete = document.getElementById("allDelete");
const todoList = document.getElementById("todo-listId");
allDelete.addEventListener("click",function(){

    if(confirm("정말 삭제하시겠습니까?")==true){   //취소메시지가 true(ok)일때
        if(todoList.innerHTML==''){              //목록칸이 비어있다면
            alert("삭제할 목록이 없습니다");       //삭제할 목록이 없다는 경고창뜨기
        }else{                                   //삭제할 목록이 있다면
            todoList.innerHTML='';               //전체 삭제
            countSpanInput.innerText= "";        // 남은할일 : "" ;
            count = 0;
        }
    }else{                  //취소메시지가 false(no)일때
        return false;                   //삭제 취소
    }
});

  /////////////      남은할일 표시해주는 function 
function updateCount(){
     const countSpanInput = document.getElementById("countSpanInput")
    countSpanInput.innerText = count+" 개";
    if ( count == 0 ) {
        countSpanInput.innerText="";
    }
}

/////////////////   전체목록 / 체크된목록 / 체크안된목록 보이는 버튼 .
const All = document.getElementById("All");
const Active = document.getElementById("Active");
const Complete = document.getElementById("Complete");
const todoListId=document.getElementById("todo-listId");

All.addEventListener("click", function() {
    showAll();
  });
  
Active.addEventListener("click", function() {
    showActive();
  });
  
Complete.addEventListener("click", function() {
    showComplete();
  });
  
  function showAll() {
    for (var i = 0; i < todoListId.children.length; i++) {
        todoListId.children[i].style.display = "flex";
    }
  }
  
  function showActive() {
    for (var i = 0; i < todoListId.children.length; i++) {
      if (todoListId.children[i].querySelector("input[type=checkbox]").checked === true) {
        todoListId.children[i].style.display = "none";
      } else {
        todoListId.children[i].style.display = "flex";
      }
    }
  }
  function showComplete() {
    for (var i = 0; i < todoListId.children.length; i++) {
      if (todoListId.children[i].querySelector("input[type=checkbox]").checked === false) {
        todoListId.children[i].style.display = "none";
      } else {
        todoListId.children[i].style.display = "flex";
      }
    }
  }

 

 

 

 

 

 

 

 

 

'WebFront_ > TodoList' 카테고리의 다른 글

TodoList 연습 5 , 서버재실행시 체크박스 체크 유지  (0) 2023.04.14
TodoList 연습 4 , 체크박스 체크시 체크된것만 삭제.  (0) 2023.04.14
TodoList 연습 3 , 서버실행하면 DB저장된 TodoList 바로출력  (0) 2023.04.13
TodoList 연습 2 , DB 연동 ( html,css,js, ajax ( Servlet ) )  (0) 2023.04.12
'WebFront_/TodoList' Related Articles more
Comments