[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);
Author And Source
이 문제에 관하여([22/02/11] ToDoList 만들기 (1) localstorage에 저장까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hellocdpa/220211-ToDoList-만들기-1-localstorage에-저장까지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
