Adding todos
todo.js
const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("tood-list");
//input(todolist ) 값을 받는, toDoForm.querySelector("input");과 같다.
const toDoInput = document.querySelector("#todo-form input");
function paintToDo(newTodo){
const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span);
span.innerText = newTodo;
console.log(li);
}
//
function handleToDoSubmit(event) {
event.preventDefault();
//console.log(toDoInput.value);
const newTodo = toDoInput.value; //input 값 제출하면 저장
//submit 하면 사라지게 한다.
toDoInput.value = "";
paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);>>
paintTodo(newTodo) 를 함수 handleTodoSubmit() 추가
우리가 텍스트를 적고 submit할 때 마다 원하던 기능들을 실행시키기 위해 위헤서 만든 paintTodo(newTodo) 함수를 handleTodoSubmit() 함수에 추가한다.
기존 handleTodoSubmit() 가 텍스트 상자 안의 텍스트를 초기화하는 기능만 했다면,
paintToDo(newTodo) 는 제출한 텍스트를 매번 HTML 의 ul 안에서 li태그와 그 안에 속하는 span 태그를 만들고 span 에 텍스트로 남겨 웹 화면에서 보일 수 있는 것 까지 하게 된다.
span.innerText = newTodo;
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>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");
function paintToDo(newTodo){
const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span);
span.innerText = newTodo;
//console.log(li);
toDoList.appendChild(li);
}
//
function handleToDoSubmit(event) {
event.preventDefault();
//console.log(toDoInput.value);
const newTodo = toDoInput.value; //input 값 제출하면 저장
//submit 하면 사라지게 한다.
toDoInput.value = "";
paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);>>
Deleting toDos
어느 todoList 항목을 삭제할 지!
1. js 에서 html 내부에 button 태그 만들기
1) const button = document.createElement("button");
// html에 button 태그를 생성할 수 있도록 button이라는 객체 정의, createElement !!
2) button.innerText = "❌"; // 사용자가 버튼을 누르면 텍스트가 삭제되는 기능이 있다는 것을 인식시키기 위해 버튼 내부 텍스트를 "❌"로 정의 (윈도우 기준: window 키 + . )
3) button.addEventListener("click", deleteToDo); // 버튼에서 이벤트가 발생했을 때, 삭재하는 기능의 함수가 실행되도록 한다. 여기에선 "click"이 발생 시, deleteToDo함수가 실생되도록 함
2. 삭제 기능을 담당하는 함수 생성 ( ★어느 todoList 항목을 삭제할 지! ★ )
1) const li = event.target.parentElement;
// 이벤트가 발생했들때.해당객체를지정하여.그것의부모태그를지정한다. ★어느 todoList 항목을 삭제할 지! ★
2) li.remove(); // 위에서 지정된 것을 삭제
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");
//삭제 event (특정 todoList 삭제)
function deleteToDo(event){
//console.log(event.target.parentElment);
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);
//console.log(li);
toDoList.appendChild(li);
}
//
function handleToDoSubmit(event) {
event.preventDefault();
//console.log(toDoInput.value);
const newTodo = toDoInput.value; //input 값 제출하면 저장
//submit 하면 사라지게 한다.
toDoInput.value = "";
paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);>>
delete 버튼 누르기 전
delete 버튼 누른 후
Saving todos
1. todo-list의 빈 배열 선언
const toDos = [] // toDo 텍스트들을 배열로 저장하기 위해서 빈 배열 선언
2.저장 기능 함수 fucntion saveTodo()
함수 handleToDoSubmit() 할 때 마다 값을 저장하기 위해 saveToDos() 함수를 안에 넣는다.
3. 저장하는 기능 수행 function saveTodos()
localStorage.setItem("todos", toDos); // local storage string data type으로 저장하게 된다.
4. JSON.stringify() 객체
string data type을 object 같이 바꾸면 index 를 통해 value에 접근할 수 있다.
예: "[a,b,c,d]" (string) => [a, b, c, d] (array);
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 = [];
function saveToDos(){
localStorage.setItem("todos", JSON.stringify(toDos));
}
//삭제 event (특정 todoList 삭제)
function deleteToDo(event){
//console.log(event.target.parentElment);
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);
//console.log(li);
toDoList.appendChild(li);
}
//
function handleToDoSubmit(event) {
event.preventDefault();
//console.log(toDoInput.value);
const newTodo = toDoInput.value; //input 값 제출하면 저장
//submit 하면 사라지게 한다.
toDoInput.value = "";
//Saving todos, array에
toDos.push(newTodo);
paintToDo(newTodo);
saveToDos()
}
toDoForm.addEventListener("submit", handleToDoSubmit);>>
local storage에 string 형태로 들어간 것을 알 수 있다.
참조 노마드 코더
'JS > 몰라JS' 카테고리의 다른 글
| [javaScipt] 날씨 API (0) | 2023.06.18 |
|---|---|
| [javaScript] todoList(2) (1) | 2023.06.17 |
| [javaScript] 랜덤명언 & 배경생성 (0) | 2023.06.14 |
| [javaScipt] 시계 만들기(clock) (0) | 2023.06.08 |
| [javascript] Login 처리 (0) | 2023.06.05 |
