[22/02/11] ToDoList 만들기 (1) localstorage에 저장까지

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>momentum</title>
    <link rel="stylesheet" href="/css/nomad01.css">
    
</head>
<body>
        <form id="loginForm" class="hidden">
            <input type="text" id="inputName" maxlength="15" placeholder="Input your name!" required>
            <input type="submit" value="login" >
        </form>
        <h2 id="clock">00:00</h2>
        <h1 id="greeting" class="hidden"></h1>

        <form id="todo-form">
            <input type="text" placeholder="to do cocolo list" required>
        </form>
        <ul id="todo-list"></ul>


        <div id="quote">
            <span></span>
            <div id="author"></div>
        </div>

       <button type="button" id="like">🤍</button>


       <button type="button" onclick="logout()">로그아웃</button>



</body>
<script src="/js/greeting.js"></script>
<script src="/js/clock.js"></script>
<script src="/js/quotes.js"></script>
<script src="/js/background.js"></script>
<script src="/js/todo.js"></script>
</html>

toDoList.js

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
const toDos = [];

function saveTodo(){
    // localStorage.setItem("todos",toDos); 텍스트만 저장이 됨
    // json 타입으로 저장 
    localStorage.setItem("todos",JSON.stringify);
}

const heart = document.querySelector("#like")

//삭제함수
function deleteToDo(event){
    //모든 HTML element 에는 하나 이상의 property가 있음 -> 그 중 하나 parentElement  부모요소
    //누른 버튼의 부모
    const li = event.target.parentElement;
    li.remove();
}


// li와 span을 생성
function paintToDo(newTodo){
    const li = document.createElement("li")
    const span = document.createElement("span");
    span.innerHTML = newTodo;
  
    const button = document.createElement("button")
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo)
    li.appendChild(span);
    li.appendChild(button)
    toDoList.appendChild(li);
}

//toDoForm 저장하기
function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    //toDos array에 저장
    toDos.push(newTodo);
    paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit)


//그냥 만든 좋아요 버튼
function handleClick(){
    heart.innerText = "❤"
}
heart.addEventListener("click",handleClick);

좋은 웹페이지 즐겨찾기