👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#7.0~7.2

change up·2023년 6월 14일

노마드코더 클론코딩

목록 보기

11/13

- ToDoList 기능 구현하기.

+todo.js 연결 / todo form만들기
<!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">
    <link rel = "stylesheet" href="css/app.css">
    <title>Momentum</title>
</head>
<body>
    <h2 id ="clock">00:00:00</h2>
    <form class="hidden" id="login-form">
    <input type="text" />
    <button id="button">Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <form id = "todo-form">
        <input type = "text" placeholder="write a To Do and Press Enter" required/>
    </form>
    <ol id = "todo-list"></ol>
    <div id="quote">
        <span></span>
        <span></span>
    </div>
    <script src="js/clock.js"></script>
    <script src="js/greeting.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    <script src="js/todo.js"></script>
    

</body>
</html>

/*+toDoForm에 입력된 값이 서버로 보내지도록 submit하고 그렇게 쌓은 목록들이 보여지도록 ol-li로 
숫자로 순서가 표현되도록 한 후 , 해당 목록을 삭제할 수 있는 delete button을 추가함.*/
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDolist = document.getElementById("todo-list");

//event.target을 사용하면 현재 이벤트가 발생한 요소의 속성들을 얻을 수 있다.
//Dom 객체이기 때문에 변경을 주고 싶다면 Dom메소드를 사용해야 한다.
//button 속성의 부모요소로 li를 가르킨다.
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText = "🙅🏻";
    button.addEventListener("click",deleteToDo)
    li.appendChild(span);
    li.appendChild(button);
    toDolist.appendChild(li)
    
}
/* 삭제기능도 가능하도록:span을 만들어서 li 내부에 자식으로 넣음 그 다음에 new ToDo에 입력받은 값을 span내부에 넣음 */

function handleToDoSubmit(event) {
    event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
paintToDo(newTodo)

}

toDoForm.addEventListener("submit",handleToDoSubmit)



//toDoInput.value = "";(enter 하면 칸을 빈화면으로 비우도록 만든다.)

change up

새싹이

이전 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#6.0~6.2

다음 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#7.0~7.2

노마드코더 클론코딩

- ToDoList 기능 구현하기.

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#6.0~6.2

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#7.3-7.5

0개의 댓글