Notice
Recent Posts
Recent Comments
Link
하루 하루
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 12 본문
3-6 Making a To Do List part Two
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class = "js-clock">
<h1 class="js-title">
</h1>
</div>
<form class = "js-toDoForm">
<input type="text" placeholder="Write a to do ">
</form>
<ul class="js-toDoList">
</ul>
<script src="script.js"></script>
</body>
</html>
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const TODOS_LS='toDos';
const toDos =[];
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.innerText = "X";
span.innerText =text;
li.appendChild(span);
li.appendChild(delBtn);
li.id =newId;
toDoList.appendChild(li);
const toDoObj = {
text: text,
id: newId
};
toDos.push(toDoObj);
}
function handleSubmit(event){
event.preventDefault();
// preventDefault()는 이벤트를 취소할 수 있는 경우,
// 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value="";
}
function loadToDos(){
// 로컬 스토리지에서 load
const loadedToDos = localStorage.getItem(TODOS_LS);
if(loadedToDos !== null){
const parsedTodo = JSON.parse(loadedToDos);
parsedTodo.forEach(function(todo){
paintToDo(toDo.text);
})
}
}
function init(){
loadToDos();
toDoForm.addEventListener("submit",handleSubmit);
}
init();
'IT > Web' 카테고리의 다른 글
[ JS 33 Concept ] 1. 호출스택 (0) | 2020.05.14 |
---|---|
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 13 (0) | 2020.05.14 |
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 11 (0) | 2020.05.14 |
자바스크립트와 웹 프론트엔드 - 5 (0) | 2020.05.14 |
자바스크립트와 웹 프론트엔드 - 4 (0) | 2020.05.14 |
Comments