```
{% endtab %}
{% tab title="todo.js" %}
```javascript
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const TODOS_LS = 'toDos';
let toDos = [];
function deleteToDo(event){
const btn = event.target;
const li = btn.parentNode;
toDoList.removeChild(li);
const cleanToDos = toDos.filter(function(toDo){
return toDo.id !== parseInt(li.id);
});
toDos = cleanToDos;
saveToDos();
}
function saveToDos(){
localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}
function paintToDo(text){
const li = document.createElement("li");
const delBtn = document.createElement("button");
const span = document.createElement("span");
const newId = toDos.length + 1;
delBtn.innerHTML = "❌";
delBtn.addEventListener("click", deleteToDo);
span.innerText = text;
li.appendChild(delBtn);
li.appendChild(span);
li.id = newId;
toDoList.appendChild(li);
const toDoObj = {
text: text,
id: newId
};
toDos.push(toDoObj);
saveToDos();
}
function handleSubmit(event){
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value = "";
}
function loadToDos(){
const loadedToDos = localStorage.getItem(TODOS_LS);
if(loadedToDos !== null){
const parsedToDos = JSON.parse(loadedToDos);
parsedToDos.forEach(function(toDo){
paintToDo(toDo.text);
});
}
}
function init(){
loadToDos();
toDoForm.addEventListener("submit", handleSubmit);
}
init();
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
**JSON**(Javascript Object Notation) : **데이터**를 전달할 때, 자바스크립트가 그것을 다룰 수 있도록 **Object로** 바꿔주는 기능이며 String을 Object로 변환해줄 수도 있음
> ex) emoji(이모티콘)
>
> VSC - Extensions - emojisense 설치 - Extensions Settings - Edit in settings.json
> {% endhint %}
{% hint style="info" %}
### **For Each** : **배열(array)**에 담겨있는 것들을 **각각 한 번씩** 함수를 **실행**시켜 줌
> 기본적으로 함수를 실행
> {% endhint %}
{% hint style="info" %}
search : delete child element mdn
{% endhint %}
{% hint style="info" %}
### **filter 메소드**
array의 모든 아이템을 통해 함수를 실행**,** true인 아이템들만 가지고 새로운 array를 만들어 줌
{% endhint %}
{% hint style="info" %}
**parseInt 함수** : 문자열을 숫자로 변환시키는 방법
{% endhint %}
---
# 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://westsilver.gitbook.io/study-script/nomad-script/vanillajs/momentum/to-do-list.md?ask=
```
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.