[바닐라 js로 크롬 앱만들기] 인강정리 (#7)

728x90

todo리스트만들기
todo리스트삭제기능
새로고침해도 todo리스트를 유지하고싶어 : 로컬스토리지
리스트가 덮어씌워지는걸 개선해보자
로컬스토리지 데이터 삭제하기

1. todo리스트 만들기

indext.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <h2 id="clock">00:00</h2>
    
	  <form id="login-form"  class="hidden">
     <input required maxlength="15" type="text" placeholder="What is your name?" /> 
       <button> Log in </button> <!--버튼대신 아래의 input으로 같은효과를--> 
      <input type="submit" value="Logggggg 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>
    <div id="food">
      <span>  </span>
      <span>  </span>
    </div>
    
    <script src="greetings.js"></script>
    <script src="clock.js"></script>
    <script src="foods.js"></script>
    <script src="todo.js"></script>
  </body>
</html>

required: 필수요소로 지정하기

const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");
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;
  //consle.log(li);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value= "";
  paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);

결과물

2. todo리스트의 목록을 삭제하는 기능추가

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    
	  <form id="login-form"  class="hidden">
     <input required maxlength="15" type="text" placeholder="What is your name?" /> 
       <button> Log in </button> <!--버튼대신 아래의 input으로 같은효과를--> 
      <input type="submit" value="Logggggg in" /> 
    </form>

    <h2 id="clock">00:00</h2>
    
    <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>
      <li>
        <span>text</span>
        <button>X</button>
      </li>
    <div id="food">
      <span>  </span>
      <span>  </span>
    </div>
    <script src="greetings.js"></script>
    <script src="clock.js"></script>
    <script src="foods.js"></script>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

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

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="X";
  button.addEventListener("click", deleteToDo );
  
  li.appendChild(span);
  li.appendChild(button);
  //consle.log(li);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value= "";
  paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);

event.target.parentElement : 해당 엘리먼트의 부모를 타겟으로 지정한다. (여기서 버튼의부모 즉 li가 대상이된다.)

결과물

3. todo리스트의 페이지가 새로고침하면 없어지는걸 해결해보자 -> localStorage에 저장해보자.

- 로컬스토리지에는 array를 저장할수 없고, 오직 텍스트만 저장할수 있다.

- JSON.stringify(대상) : 어떤것이든 String으로 만들어드립니다!

- JSON.parse("String") : 어떤것이든 자바스크립트가 이해할수 있는 array로 만들어드립니다!

- 자바스크립트에서 item이라는걸 지원하는데, 배열의 각원소를 item으로 지정해서 무언가를 시킬수있다. 예를들어 forEach(item)을 호출할경우, 각 배열에담긴 원소들(item)을 한번씩 대입해서 돌려준다. 즉... for문을 실행시키는 느낌이랄까.

- 아래의 두개는 같은코드다.

(item) => consloe.log("this is the turn of" , item)

function sayHello(item) {
	console.log("this is the turn of", item)
}

todo.js

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

const TODOS_KEY = "todos";
const toDos =[];

function saveToDos() {
  localStorage.setItem("todos", JSON.stringify(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="X";
  button.addEventListener("click", deleteToDo );
  
  li.appendChild(span);
  li.appendChild(button);
  //consle.log(li);
  toDoList.appendChild(li);
  
} 

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value= "";

  toDos.push(newTodo);
  paintToDo(newTodo);
  saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);

//String을 array로 바꾸어봅시다.
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log("뭐가 들었냐면" + savedToDos);

if(savedToDos) {
  console.log("힝")
 const parsedToDos = JSON.parse(savedToDos);
  console.log("parsedToDos" +parsedToDos)
  //const a= 
  parsedToDos.forEach(paintToDo);
  //console.log(a);
//console.log("힛" + a)
}

-입력한 값을 로컬스토리지에 저장하는 const sacedToDos = localStorage.getItem(TODOS_KEY);

-로컬스트로리지에 저장한뒤 새로 고침할때 해당 정보를 리스트로 뿌려주며(불러오며)화면을 보여주도록하는

if(savedToDos) {
const parsedToDos = JSON.parse(savedToDos);
console.log("parsedToDos" +parsedToDos)
parsedToDos.forEach(paintToDo); // 각 item(배월의 원소)들을 순서대로 대입해서 함수를 적용시킨다.
}

4. 새로고침한뒤 값을 추가하면 이전값(로컬스토리에 저장된)은 뿌려주지만, 새값들이 들어오면 이전 저장된값들위에 덮어써져 버리는문제를 해결해보자.

-상단 쪽 const toDos =[];에서 매번 로컬스토리지에 저장하는 배열이 초기화되는것이 이유다.

todo.js

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

const TODOS_KEY = "todos";
//const toDos =[];
let toDos = []; //---------------수정----------------

function saveToDos() {
  localStorage.setItem("todos", JSON.stringify(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="X";
  button.addEventListener("click", deleteToDo );
  
  li.appendChild(span);
  li.appendChild(button);
  //consle.log(li);
  toDoList.appendChild(li);
  
} 

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value= "";

  toDos.push(newTodo);
  paintToDo(newTodo);
  saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);

//String을 array로 바꾸어봅시다.
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log("뭐가 들었냐면" + savedToDos);

if(savedToDos) {
 const parsedToDos = JSON.parse(savedToDos);
 toDos = parsedToDos; //---------------추가----------------
 parsedToDos.forEach(paintToDo);

}

5. 이번에는 x버튼을 눌러 삭제했을때 스토리지에서도 삭제해보자.

-이전에 만들었던 모양은,, 어떤요소가 어떤건지 알아보기 힘들다. 예를들어 같은 텍스트가 2개존재한다면? 두개를 구별할수 있을까?

- 그래서 요소마다 특별한 id를 주고싶다!

- element가 만들어질때마다 id를 줘보자.

- filter함수 : array가 가진요소를 모두 대입해서 함수를 돌리되, true를 반환하면 유지하rh false라면 그 요소는 제외된다.

- 버튼을눌러 해당 요소의 id를 가진애는 제외하고 새롭게 array를 만들고 새로운 배열을 저장하는 식으로 삭제함수를 수정할것이다.

todo.js

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

const TODOS_KEY = "todos";
//const toDos =[];
let toDos = [];

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  console.log("tttttt:  " + li.id);
  
  console.log(typeof(li.id)); //타입이 String이다. 따라서 parseInt로 int타입으로 바꾸어주자.
  toDos = toDos.filter((toDo)=> toDo.id !== parseInt(li.id)); //--추가코드--
  //위의 코드는 아래와 같다.
  // function ye(toDo) { retrun toDo !== li.id}
  
  saveToDos();//--추가코드--
  
  //console.log(toDos);
  
  
 
}

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="X";
  button.addEventListener("click", deleteToDo );
  
  li.appendChild(span);
  li.appendChild(button);
  //consle.log(li);
  toDoList.appendChild(li);
  
} 

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value= "";

  //toDos.push(newTodo);
  const newTodoObj = {
    text : newTodo,
    id: Date.now(),//요소가만들어질때의 시간
  }
  toDos.push(newTodoObj);
  paintToDo(newTodoObj);
  saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);

//String을 array로 바꾸어봅시다.
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log("뭐가 들었냐면" + savedToDos);

if(savedToDos) {
 const parsedToDos = JSON.parse(savedToDos);
 toDos = parsedToDos;
 parsedToDos.forEach(paintToDo);//가진 요소마다 대입해서돌림

}
//filter함수 : array가 가진요소를 모두 대입해서 함수를 돌리되, true를 반환하면 유지하고 false라면 그 요소는 제외된다.

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

const TODOS_KEY = "todos";
//const toDos =[];
let toDos = [];

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  console.log("tttttt:  " + li.id);

  console.log(typeof(li.id));
  toDos = toDos.filter((toDo)=> toDo.id !== parseInt(li.id));//----추가---
  saveToDos();
  
  //console.log(toDos);
  
  //위의 코드는 아래와 같다.
  // function ye(toDo) { retrun toDo !== li.id}
 
}

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="X";
  button.addEventListener("click", deleteToDo );
  
  li.appendChild(span);
  li.appendChild(button);
  //consle.log(li);
  toDoList.appendChild(li);
  
} 

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value= "";

  //toDos.push(newTodo);
  const newTodoObj = {
    text : newTodo,
    id: Date.now(),//요소가만들어질때의 시간 ----추가---
  }
  toDos.push(newTodoObj);
  paintToDo(newTodoObj);
  saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);

//String을 array로 바꾸어봅시다.
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log("뭐가 들었냐면" + savedToDos);

if(savedToDos) {
 const parsedToDos = JSON.parse(savedToDos);
 toDos = parsedToDos;
 parsedToDos.forEach(paintToDo);//가진 요소마다 대입해서돌림 -------

}
//filter함수 : array가 가진요소를 모두 대입해서 함수를 돌리되, true를 반환하면 유지하고 false라면 그 요소는 제외된다.

728x90

저작자표시 비영리 변경금지

'개발공부 > JavaScript' 카테고리의 다른 글

[인사이드 자바스크립트] 교재 정리 #3 (0)	2022.04.20
[바닐라 js로 크롬 앱만들기] 인강정리 (#8) (0)	2022.04.07
[바닐라 js로 크롬 앱만들기] 인강정리 (#5, #6) (0)	2022.03.26
[바닐라 js로 크롬 앱만들기] 인강정리 (#4) (0)	2022.03.21
[바닐라 js로 크롬 앱만들기] 인강정리 (#3) (0)	2022.03.20

오키도키, 공부하는 블로그.

[바닐라 js로 크롬 앱만들기] 인강정리 (#7)

'개발공부 > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[바닐라 js로 크롬 앱만들기] 인강정리 (#7)

'개발공부 > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바