# TO DO List

## TO DO List 만들기

```markup
<div>
    <form class="js-to-do to-do">
        <input class="js-add-to-do to-do__add-to-do" placeholder="Write a To Do here" type="text" />
    </form>
    <ul class="js-list list"></ul>
</div>
```

```javascript
const form = document.querySelector(".js-to-do"),
  input = document.querySelector(".js-add-to-do"),
  list = document.querySelector(".js-list");

let toDos = [];

function persistToDos() {
  const stringToDo = JSON.stringify(toDos);
  localStorage.setItem("toDos", stringToDo);
}

function saveToDo(text) {
  const toDoObject = {
    id: toDos.length + 1,
    value: text
  };
  toDos.push(toDoObject);
  persistToDos();
}

function handleDelete(event) {
  const target = event.target;
  const li = target.parentElement;
  const ul = li.parentElement;
  const toDoId = li.id;
  ul.removeChild(li);
  toDos = toDos.filter(function(toDo) { // filter 모든 아이템을 통해 함수를 실행하고 ture인 아이템만 가지고 새로운 array를 만듬
    return toDo.id !== parseInt(toDoId); // 모든 toDos가 li 의 id 와 같지 않을때 
  });
  persistToDos();
}

function addToDo(text) {
  const toDo = document.createElement("li");
  toDo.className = "toDo";
  toDo.id = toDos.length + 1;
  const deleteBtn = document.createElement("span");
  deleteBtn.innerHTML = "❌";
  deleteBtn.className = "toDo__button";
  deleteBtn.addEventListener("click", handleDelete);
  const label = document.createElement("label");
  label.innerHTML = text;
  toDo.appendChild(deleteBtn);
  toDo.appendChild(label);
  list.appendChild(toDo);
  saveToDo(text);
}

function onSubmit(event) {
  event.preventDefault();
  const value = input.value;
  input.value = "";
  addToDo(value);
}

function loadToDos() {
  const loadedToDos = localStorage.getItem("toDos");
  if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    parsedToDos.forEach(function(toDo) { // list에 있는 모든 ltem을 위한 함수를 실행시킴 
      addToDo(toDo.value);
    });
  }
  return;
}

function init() {
  loadToDos();
}

form.addEventListener("submit", onSubmit);

init();
```

### filter

**배열을 순회하며 요소마다 조건 확인 후** :point\_right: **조건을 만족하는 원소들로 구성된 새로운 배열 리턴**

**기본선언 방식**

```javascript
let newArray = arr.filter(callbackFunction(element, index, array), thisArg);
```

**예제**

```javascript
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); // 단어가 6개 이상인 element를 찾아줌

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
```

```javascript
function isBigEnough(value) {
  return value >= 10; // value 값이 10보다 큰것 
}

let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]


// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4, 15, 377, 395, 400, 1024, 3000];
var arr2 = arr.filter(function (n) {
    return n % 5 == 0; // 5로 나눴을때 나머지가 0 이되는값 
});
console.log(arr2); // [15, 395, 400, 3000]

```

### forEach

&#x20;**배열의 모든 요소를 반복하며 콜백 함수를 실행**

**기본선언 방식**

```javascript
arr.forEach(callback(item, index, array)
```

**예제**

```javascript
const arr = [1,3,5,7,9]; 
// e는 element i는 index의 i,a는 array
// 콜백함수의 매개변수 이름은 수정해도 되지만 순서는 변하지 않습니다.
 arr.forEach(function(e, i, a) { 
 console.log('인덱스 '+i+ ': ' +e+', 배열의 전체는: '+a);
 })


//결과값 
인덱스 0: 1, 배열의 전체는: 1,3,5,7,9 
인덱스 1: 3, 배열의 전체는: 1,3,5,7,9 
인덱스 2: 5, 배열의 전체는: 1,3,5,7,9 
인덱스 3: 7, 배열의 전체는: 1,3,5,7,9 
인덱스 4: 9, 배열의 전체는: 1,3,5,7,9


const arr = [1,3,5,7,9]; 
arr.forEach((e, i, a)=>{
 if (e === 5) return; // return true, false 든 그냥 continue 
console.log('인덱스 '+i+ ': ' +e+', 배열의 전체는: '+a); 
})

//결과값 
// 인덱스 5 해당하는 내용 빼고 모두 출력  


```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/undefined/to-do-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.