todoList 기능
todo 내용추가 .
localStorage 에 추가
todo 내용삭제 (특정 항목 삭제 id를 이용해 삭제 )
localStorage 에 삭제 (특정 항목 삭제 id를 이용해 삭제 )
- id 값 이용해 특정 내용 삭제 (id값 이용해 삭제 하려면 먼저 아래내용의 object를 만들어 id 값을 줘야 한다.)
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id) ); //id는 int , li.id는 string 비교하기 위해 parseInt 이용
saveToDos();
//특정 todo 내용의 id값을 비교해 delete 한다. 그리고는 다시 그 내용들을 저장해준다.
- 특정 id 를 이용하기 위해 Object 사용
function paintTodo(){
..(생략)..
li.id = newTodo.id;
span.innerText = newTodo.text;
...
}
★id 값을 활용하기 위해 Object 사용!
function handleToDoSubmit() {
..(생략)..
const newTodoObj = {
text : newTodo,
id : Date.now(),
}
toDos.push(newTodoObj);-p
paintToDo(newTodoObj);
...
}
todo.js 완성
const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");
//input(todolist ) 값을 받는, toDoForm.querySelector("input");과 같다.
const toDoInput = document.querySelector("#todo-form input");
const TODOS_KEY = "todos";
let toDos = [];
function saveToDos(){
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
//삭제 event (특정 todoList 삭제)
function deleteToDo(event){
//console.log(event.target.parentElment);
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); //특정 항목을 id값을 비교해 delete 한다.
saveToDos();
}
function paintToDo(newTodo){
const li = document.createElement("li");
li.id = newTodo.id;
const span = document.createElement("span");
span.innerText = newTodo.text;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo)
li.appendChild(span);
li.appendChild(button);
//console.log(li);
toDoList.appendChild(li);
}
//
function handleToDoSubmit(event) {
event.preventDefault();
//console.log(toDoInput.value);
const newTodo = toDoInput.value; //input 값 제출하면 저장
//submit 하면 사라지게 한다.
toDoInput.value = "";
const newTodoObj = {
text : newTodo,
id : Date.now(),
}; //중복되는 값을 구별하기 위해 Object로 id를 랜덤으로 만들어준다.
toDos.push(newTodoObj); //Saving todos, array에 저장
paintToDo(newTodoObj);
saveToDos()
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
//console.log(savedTODos);
if (savedToDos !== null){
const parsedToDos = JSON.parse(savedToDos); //string을 다시 array로 반환
//console.log(parsedToDos);
toDos = parsedToDos; //local Storage 기존 값들에 추가된다. (이게 없으면 덮어쓰는거임 )
parsedToDos.forEach(paintToDo) ;
}index.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">
<link rel="stylesheet" href="style.css"/>
<title>Momentom</title>
</head>
<body>
<h2 id="clock">00:00:00</h2>
<form class="hidden" id="login-form">
<input type="text" required maxlength="15" placeholder="what is your name?"/>
<button>Log In</button>
</form>
<h1 class="hidden" id="greeting"></h1>
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required />
</form>
<ul id="todo-list">
</ul>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="greeting.js"></script> <!-- import -->
<script src="clock.js"></script>
<script src="quotes.js"></script>
<script src="background.js"></script>
<script src="todo.js"></script>
</body>
</html>참조 노마드 코더
'JS > 몰라JS' 카테고리의 다른 글
| 0729(토) (0) | 2023.07.29 |
|---|---|
| [javaScipt] 날씨 API (0) | 2023.06.18 |
| [javaScript] todoList(1) (0) | 2023.06.16 |
| [javaScript] 랜덤명언 & 배경생성 (0) | 2023.06.14 |
| [javaScipt] 시계 만들기(clock) (0) | 2023.06.08 |
