7.0 Setup
idex.html
<body>
<h2 id="clock">00:00:00</h2>
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="Log In" />
</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>
<!--ul태그를 만들어서 js로 li태그 추가 예정-->
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/greeting.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>todo.js
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("#todo-form input");
//document.querySelector("#todo-form input");도 위와 같은 의미
const toDoLlist= document.getElementById("todo-list");
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value; //to-do input의 값을 새로운 변수에 저장하는 것
toDoInput.value=""; //todo input의 값을 지워줌
}
toDoForm.addEventListener("submit",handleToDoSubmit);
enter 누르고 난 후
=> 계속 새로고침이 되어서 봤더니 index.html에 todo.js를 import해주지 않았음...
7.1 Adding To-Do
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
// 새로 추가한 함수
function paintToDo(newTodo) {
const li = document.createElement("li"); // li태그 추가
const span = document.createElement("span"); // span태그 추가
li.appendChild(span); // li태그 안에 자식을 span 태그로 만듦
span.innerText = newTodo; // span태그 안에 text가 new Todo 객체가 되도록 함
toDoList.appendChild(li); // ul 태그 안에 li 를 속하게 함
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
paintToDo(newTodo); //추가
}
toDoForm.addEventListener("submit", handleToDoSubmit);li.append("추가해주세요") → 가능
li.appendChild("추가해주세요") → 불가능 - typeError(객체만 추가 가능)
! 아무것도 입력하지 않았을 경우는 추가되지 않음
-> input에 required를 추가했기 때문
!! 새로고침하면 지워짐 & 목록 지울 수 없음
7.2 Deleting To-Do
(이모지 단축키 윈도우+.) ✨
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
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"); // html에 button 태그를 생성
button.innerText = "❌"; // 사용자가 버튼을 누르면 텍스트가 삭제되는 기능이 있다는 것을 인식시키기 위해 버튼 내부 텍스트를 "❌"로 정의
button.addEventListener("click", deleteToDo);// 버튼을 Click하면 deleteToDo 함수 실행
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);
x를 누르면 삭제되는 것을 확인할 수 있음
>> 하지만 아직도 새로고침하면 내용이 사라진다.
7.3 Saving To-Do
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
const toDos = [];// toDo에 들어오는 텍스트를 배열로 묶어 보관하기 위해 빈 array를 생성
function saveToDos() {
localStorage.setItem("todos", JSON.stringify(toDos));
// 값을 string형태의 array로 저장함
//key: todos value: ["a", "b", "c"]
//로컬 저장소에는 array 저장 불가능, 오직 text만
}
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);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
toDos.push(newTodo);
//arr1.push(5); -> [1,2,3,4,5]
paintToDo(newTodo);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
JSON.stringify()
: js object나 array나 어떤 것이든 string data type으로 바꿔주는 기능
localStorage 에서 확인해봤을 때 값들을 단순한 string 으로 변경하여 array 모양으로 저장
ex) JSON.stringify([1,2,3,4]) ---> "[1,2,3,4]" 반환
7.4-5 Loading To-Do
JSON.parse()
: string을 array로 바꿈
ex) JSON.parse("[1,2,3,4]") ----> [1,2,3,4] 반환
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos"; //추가
let toDos = []; //배열의 내용들이 바뀌기 때문에 let으로 변경
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
//=== localstorage.setItem('todos','[]');
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);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
toDos.push(newTodo);
paintToDo(newTodo);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
//전에 있던 toDo들 복원
//[] = ['a','b','c'], 시작되면서 빈 값일 경우 로컬저장소에서 가져온 값을 배열로 다시 저장 시킴(불러오기)
parsedToDos.forEach((item) => console.log("this is the turn of ", item));
//parsedToDos배열에 들어 있는 각 요소들을 =>실행문 실행시켜줌
}(item) => console.log("this is the turn of ", item) -------------------------------------------------- function sayHello(item) { console.log("this is the turn of ", item); }위 두 표현은 같은 표현
배열이름.forEach((매개변수) => {실행문})
: 배열이 가지고 있는 모든 값에 대해 같은 함수를 실행시키는 내장함수, array 안의 각각의 요소에 대해 하나의 function을 실행
7.6-8 Deleting To-Do
>> 문제점 <<
위 코드를 실행 시 불러오고 삭제는 가능하지만 삭제 시 로컬 저장소에 업데이트하지 않음 즉, 리스트를 지우면 화면에서는 지워지지만 새로고침 하면 다시 화면에 나타난다
-> localStaorage에서는 지우지 않았기 때문 localStaorage는 데이터베이스(array)는 단순히 array 값을 복사해두는 곳이므로 값을 지울 때 어떤 값을 지우는지 구분이 안됨
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos";
let toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(event) {
const li = event.target.parentElement;
console.log(li.id); //
li.remove();
}
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);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
toDos.push(newTodoObj);
paintToDo(newTodoObj);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
parsedToDos.forEach(paintToDo);
}
>해결법
todo에 id를 부여하여 obj를 만들어준다.
ex) [{id:12415, text="dfas"}]Date.now()를 사용하여 랜덤으로 id를 만들어줌!
//1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 숫자 값으로 반환하는 내장함수
>filter<
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos";
let toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
//array 를 저장 console.log ['a', 'b', 's'] localStorage a,b,c --> JSON.stringify적용 후 console.log ['f', 'd', 's'] localStorage["f","d","s"]
}
function deleteToDo(event) {
const li = event.target.parentElement; // 삭제하고 싶은 li
li.remove(); // li 삭제
//수정 및 추가
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
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);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value; //인풋의 현재 값을 새로운 변수에 복사하는 것
toDoInput.value = ""; // 엔터누를때마다 인풋 비어있게 하기. newTodo 변수와 전혀 상관 없음
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
toDos.push(newTodoObj); // 배열에 obj 저장
paintToDo(newTodoObj); // todo 항목 표시하기
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
parsedToDos.forEach(paintToDo); // // parsedToDos의 각각의 item에 대하여 한개의 함수 실행(화살표함수)
}
배열이름.filter((매개변수) => {실행문})
: 조건에 해당하는 인자값만 모아놓은 새로운 배열을 반환하는 내장함수
function myFilter() {return true}
ex) const arr = [1,2,3,4,5]; function myFilter(item) {return item !== 3}; arr.filter(myFilter) // 새로운 배열 [1,2,4,5] 반환 (기존 arr는 그대로)
