WEB DEVELOP/STUDY
[JavaScript] ToDo List 만들기 (미완성)
Jungry_
2019. 2. 8. 12:37
반응형
자바스크립트로 ToDo 리스트를 만들어보는중이다
이름 저장이랑 비슷할거라구 생각했는데 하나도 아님 ㅋㅋ
localStorage 처리랑 지우는게 가장 어려운듯 ..!!!
일단 오늘 만든 부분
const todoForm=document.querySelector(".js-todo");
const input=todoForm.querySelector("input");
const ul=document.querySelector("ul");
let TODO=[]; //id와 text 가 저장될 곳
function deleteList(){}//x누르면 삭제하는거
function makeList(text){
const li=document.createElement("li");//li 생성
const span=document.createElement("span");//span 생성
const btn=document.createElement("button")//button 생성
const ID=TODO.length+1;
btn.innerText="X";
btn.addEventListener("click",deleteList);
span.innerText=text;
li.id=ID;
li.appendChild(btn);
li.appendChild(span);
ul.appendChild(li);
const newTodo={
id:ID,
text:text
};
TODO.push(newTodo);
} //받아온 텍스트 리스트로 만드는 역할
function todoList(event){ //텍스트 받아오는 역할
event.preventDefault();
const inputValue=input.value;
makeList(inputValue);
}
function init(){
todoForm.addEventListener("submit",todoList);
}
init();
나머지는 조금 더 고민해봐야겠다
반응형