To-do 리스트를 빌드해볼거다.
greetings했던것과 비슷하다.
todo.js 생성 후 html에 추가해보자.
그리고 toDoList를 입력 할 Form을 만들고,
그 아래에는 입력한 내용을 리스트 형태로 출력하기 위해 ul태그를 생성할거다.
만약에 toDos가 null이면 아무것도 하지 않을거다.
왜냐하면 greeting form과 다르게 이 form은 항상 입력창을 활성화 할것이므로(showing)
여기도 submit 했을 때 문제점을 해결하기 위해
이벤트를 가져올 때 event.preventDefault를 넣어줄거다.
엔터를 누르면 입력칸에 입력 내용이 그대로 남아있는데,
다음 내용을 입력할수있게 엔터를 누르면 공백이 되도록 만들어 줄거다.
이제 ul태그안에 li 를 만들어보자.
PaintToDo에 ul을 만들꺼다.
삭제버튼을 누르면 리스트를 지워주기 위해서 리스트, 텍스트, 버튼을 묶어서 관리할거다.
empty li를 만든 다음에 버튼, span을 만들어주고,
span과 삭제버튼을 li에 넣는다.
마지막으로 ul태그인 toDoList에 li를 집어주면된다. ( toDoList.appendChild(li) )
<코드기록>
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const TODOS_LS = "toDos";
function loadToDos() {
const toDos = localStorage.getItem(TODOS_LS);
if (toDos !== null) {
}
}
function handleSubmit(event) {
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value = "";
}
function paintToDo(text) {
const li = document.createElement("li");
const delBtn = document.createElement("button");
delBtn.innerText = "✖";
const span = document.createElement("span");
span.innerText = text;
li.appendChild(span);
li.appendChild(delBtn);
toDoList.appendChild(li); //ul태그
}
function init() {
loadToDos();
toDoForm.addEventListener("submit", handleSubmit);
}
init();
<실행화면>
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Clone Website' 카테고리의 다른 글
[Vanilla-JS] 4. Saving the User Name (0) | 2020.08.06 |
---|---|
[Vanilla-JS] 3. Making a JS Clock part (0) | 2020.08.02 |
[Vanilla-JS] 2. 텍스트를 클릭하면 색상이 변경 (0) | 2020.08.02 |
1. ES5 , Vanilla JS(JavaScript)란? (0) | 2020.07.01 |
댓글