- 프론트엔드 공부 27일차 -
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<title>오늘 할일</title>
<link rel="stylesheet" href="./index.css" />
<script src="./index.js" defer></script>
</head>
<body>
<h1>ToDo</h1>
<div class="todoContainer">
<input type="text" id="todoInput" onkeydown="keyCodeCheck()" />
<ul id="todoList"></ul>
</div>
<div class="deleteBtnWrapper">
<button onclick="deleteAll()">전체 삭제</button>
</div>
</body>
</html>JS
const todoInput = document.querySelector("#todoInput");
const todoList = document.querySelector("#todoList");
const savedTodoList = JSON.parse(localStorage.getItem("save-Items"));
const createTodo = function (storageData) {
let todoContents = todoInput.value;
if (storageData) {
todoContents = storageData.contents;
}
const newLi = document.createElement("li");
const newSpan = document.createElement("span");
const newBtn = document.createElement("button");
newBtn.addEventListener("click", () => {
newLi.classList.toggle("complete");
saveItem();
});
newLi.addEventListener("dblclick", () => {
newLi.remove();
saveItem();
});
if (storageData?.complete === true) {
newLi.classList.add("complete");
}
newSpan.textContent = todoContents;
newLi.appendChild(newBtn);
newLi.appendChild(newSpan);
todoList.appendChild(newLi);
todoInput.value = "";
saveItem();
};
const keyCodeCheck = function () {
if (window.event.keyCode === 13 && todoInput.value !== "") {
createTodo();
}
};
const deleteAll = function () {
const liList = document.querySelectorAll("li");
for (let i = 0; i < liList.length; i++) {
liList[i].remove();
}
saveItem();
};
const saveItem = function () {
const saveItems = [];
for (let i = 0; i < todoList.children.length; i++) {
const toDoObj = {
contents: todoList.children[i].querySelector("span").textContent,
complete: todoList.children[i].classList.contains("complete"),
};
saveItems.push(toDoObj);
}
if (saveItems.length === 0) {
localStorage.removeItem("save-Items");
} else {
localStorage.setItem("save-Items", JSON.stringify(saveItems));
}
};
if (savedTodoList) {
for (let i = 0; i < savedTodoList.length; i++) {
createTodo(savedTodoList[i]);
}
}CSS
* {
box-sizing: border-box;
}
body {
background-color: azure;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
min-height: 100vh;
}
.todoContainer {
max-width: 100%;
width: 400px;
}
#todoInput {
background-color: lightyellow;
border: none;
display: block;
font-size: 2rem;
padding: 0.5rem 2rem 0.5rem 0.5rem;
width: 100%;
}
#todoList {
background-color: lightyellow;
list-style-type: none;
margin: 0;
padding: 0;
}
#todoList li {
border-top: 1px solid rgb(242, 242, 242);
font-size: 1.5rem;
user-select: none;
}
.complete {
color: rgb(155, 155, 155);
text-decoration: line-through;
}
li button {
background-color: mintcream;
width: 1.5rem;
height: 1.5rem;
margin: 0.5rem;
border: 2px solid black;
border-radius: 8px;
cursor: pointer;
}
li button:active {
border: 2px solid grey;
}
.deleteBtnWrapper {
margin-top: 1rem;
}
.deleteBtnWrapper button {
font-weight: bold;
background-color: antiquewhite;
padding: 0.2rem 1rem;
cursor: pointer;
}
페이지를 새로고침 해도 항목이 유지되도록 하였다.
localStorage.setItem("save-Items", JSON.stringify(saveItems));
JSON.stringify(saveItems) ?
saveItems을 JSON 형태로 변환다.
JSON이란?
JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식이다.
JSON.parse(localStorage.getItem("save-Items"))
JSON.parse(saveItems) ?
JSON 형태인 saveItems을 객체로 변환한다.
JSON형태로 변환한 이유?
localStorage를 이용해 저장할 경우 데이터를 문자열 형태로만 저장한다. 즉 배열 형태로는 저장하지 못한다는 것을 의미한다.
그렇기에 배열을 localStorage에서 저장할 수 있는 형태인 JSON으로 변환하여 저장하도록 하였다.
'프론트엔드 공부 > Javascript 기초' 카테고리의 다른 글
| 29일차 프론트엔드 공부 (0) | 2024.10.13 |
|---|---|
| 28일차 프론트엔드 공부 - API (0) | 2024.10.10 |
| 26일차 프론트엔드 공부 - DOM (3) | 2024.10.07 |
| 25일차 프론트엔드 공부 - 함수 (1) | 2024.10.06 |
| 24일차 프론트엔드 공부 - 반복문 (0) | 2024.10.05 |