Html, CSS 및 Javascript(LocalStorage)를 사용하여 처음부터 Todo-List를 빌드합니다.
그렇다면 이 문서는 귀하를 위한 것입니다. 이 문서에서는 Html, CSS 및 Javascript를 사용하여 처음부터 할 일 목록을 작성하고 데이터 지속성을 위해 Javascript의 LocalStorage API도 활용할 것입니다.
시작하겠습니다.
전제 조건
설정
이제 코딩하자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-wrapper">
<div class="action-wrapper">
<input type="text" id="input"> <button id="add_btn">Add</button>
</div>
<div class="list-wrapper" id="item_list_container">
</div>
</div>
<script src="src.js"></script>
</body>
</html>
무슨 일이야?
위의 코드는 웹 페이지의 구조를 나타내는 기본 HTML 페이지를 나타냅니다.
그러나 몇 가지 유의할 사항이 있습니다. 코드의 head 태그 내에는
<link rel="stylesheet" href="style.css"> 가 있습니다. 이 태그는 처음에 생성한 style.css를 HTML 페이지에 연결하여 CSS 파일을 사용하여 HTML 페이지를 디자인할 수 있도록 하는 데 사용됩니다. 우리가 가지고 있는 태그<script src="src.js"></script> 이것은 src.js 파일을 HTML 페이지로 로드하는 데 사용됩니다..main-wrapper{
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px 0%;
}
.action-wrapper{
padding: 30px;
}
.action-wrapper input{
font-size: 1rem;
padding: 10px;
border: blue 1px solid;
}
.action-wrapper button, .item-actions button{
padding: 12px;
background-color: blue;
color: white;
font-weight: bolder;
border: solid 1px rgb(112, 153, 153);
}
.action-wrapper button:hover, .item-actions button:hover{
background-color: white;
color: black;
border: blue 1px solid;
cursor: pointer;
}
.list-item{
width: 100%;
margin: 20px 0%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.item-name{
padding: 10px;
font-size: 1.2rem;
}
무슨 일이야?
이것은 웹 페이지에 몇 가지 간단한 스타일을 추가하는 기본적인 CSS 코드입니다.
const id = (x) => {
return document.getElementById(x);
}
let input = id('input');
let addBtn = id('add_btn');
let listContainer = id('item_list_container');
let itemList = localStorage.itemList ? JSON.parse(localStorage.itemList) : [];
const renderList = () => {
listContainer.innerHTML = ``;
for (let i = itemList.length - 1; i > 0; i--) {
listContainer.innerHTML += `
<div class="list-item">
<div class="item-name">
${itemList[i]}
</div>
<div class="item-actions">
<button onclick="editItem(${i})">Edit</button>
<button onclick="deleteItem(${i})">Delete</button>
</div>
</div>
`;
}
}
const addEvent = () => {
let value = input.value;
if (value.length > 0) {
itemList.push(value);
input.value = "";
} else {
alert("Please specify a name for your task");
}
localStorage.itemList = JSON.stringify(itemList);
renderList();
}
const deleteItem = (index)=>{
let item = itemList[index];
if(item != undefined){
itemList.splice(index, 1);
localStorage.itemList = JSON.stringify(itemList);
renderList();
}else{
alert("Item has already been deleted.");
}
}
const editItem = (index)=>{
let item = itemList[index];
if(item != undefined){
let ask = prompt(`Change "${item}" to : `);
if(ask.length > 0){
itemList[index] = ask;
localStorage.itemList = JSON.stringify(itemList);
renderList();
}
}else{
alert("Item not available in list.");
}
}
addBtn.addEventListener("click", (e) => {
e.preventDefault();
addEvent();
})
renderList();
무슨 일이야?
위의 코드는 웹 페이지에서 수행되는 모든 작업을 처리하는 역할을 합니다. 이것은 코드에 대한 블록별 설명입니다. :
파일의 시작 부분에
const id = (x) => {
return document.getElementById(x);
}
id 함수는 요소의 id를 전달하여 DOM에서 요소를 가져오는 데 사용되는 속기입니다. 이 함수는
document.getElementById() 메서드를 간단히 축약하기 위해 만들어졌습니다.변수 선언
let input = id('input');
let addBtn = id('add_btn');
let listContainer = id('item_list_container');
let itemList = localStorage.itemList ? JSON.parse(localStorage.itemList) : [];
input, addBtn 및 listContainer 변수는 할당하려는 요소의 해당 id로 Augment를 사용하여 id 함수에 할당됩니다.
- The input variable represents
<input type="text" id="input">from our html file.- The addBtn variable represents
<button id="add_btn">Add</button>from our html file.- The listContainer variable represents
<div class="list-wrapper" id="item_list_container"></div>from our html file.- The itemList variable contains the to-do item list from localStorage, we used a ternary operator to check if the ltemList is available in localStorage then we parse the string and assign it to our variable or we just assign an empty array. This is to ensure that at least an array is assigned to the variable.
renderList 함수.
const renderList = () => {
listContainer.innerHTML = ``;
for (let i = itemList.length - 1; i > 0; i--) {
listContainer.innerHTML += `
<div class="list-item">
<div class="item-name">
${itemList[i]}
</div>
<div class="item-actions">
<button onclick="editItem(${i})">Edit</button>
<button onclick="deleteItem(${i})">Delete</button>
</div>
</div>
`;
}
}
renderList 함수는 단순히 할 일 항목을 웹 페이지에 채우는 데 사용됩니다.
아래는 이 함수 내에서 수행되는 작업 목록입니다.
- First, we empty all the elements inside the listContainer by adding
listContainer.innerHTML =;.- Then we loop through itemList array in descending order and then we add an HTML markup into the listContainer for each of the iterations. The loop was written in ascending order so that newer items will be at the top of the list.
addEvent 함수
const addEvent = () => {
let value = input.value;
if (value.length > 0) {
itemList.push(value);
input.value = "";
} else {
alert("Please specify a name for your task");
}
localStorage.itemList = JSON.stringify(itemList);
renderList();
}
이름에서 알 수 있듯이 addEvent 함수는 할 일 목록에 새 이벤트를 추가하는 데 사용됩니다.
- First we try to access the value typed into our input by using
let value = input.value;.- Then we write a condition to check if something was actually typed into the box. If true we add the newly added item into the itemList array by using
itemList.push(value);then we empty the input box by usinginput.value = "";. If nothing was typed into the box we show an alert that nothing was typed.- After the conditional statement we update the itemList in our localStorage by using
localStorage.itemList = JSON.stringify(itemList);then we runrenderList();to update the webpage with the new item.
deleteItem 함수.
const deleteItem = (index)=>{
let item = itemList[index];
if(item != undefined){
itemList.splice(index, 1);
localStorage.itemList = JSON.stringify(itemList);
renderList();
}else{
alert("Item has already been deleted.");
}
}
deleteItem 함수는 할 일 목록에서 특정 항목을 제거하는 데 사용됩니다.
- The function receives one parameter index that represents the position of the item we want to delete from the to-do list.
- Then we write a condition to check if the item we are trying to delete is available. If true we remove the item but adding
itemList.splice(index, 1);then we update the localStorage itemList usinglocalStorage.itemList = JSON.stringify(itemList);after this we runrenderList();to update the items in our to-do list. If the item is not found we send an alert that the item has already been deleted.
editItem 함수.
const editItem = (index)=>{
let item = itemList[index];
if(item != undefined){
let ask = prompt(`Change "${item}" to : `);
if(ask.length > 0){
itemList[index] = ask;
localStorage.itemList = JSON.stringify(itemList);
renderList();
}
}else{
alert("Item not available in the list.");
}
}
이 함수는 deleteItem() 함수와 매우 동일하며 유일한 차이점은 itemList에서 삭제하는 대신 특정 인덱스에서 itemList의 값을 업데이트한다는 것입니다.
- After writing the condition identical to that of deleteItem(), we open a prompt asking the user what they want to change the item to, using
let ask = prompt(`Change "${item}" to : `);;- Then we confirm that the user typed something into the prompt, if yes we update the value of the itemList at the provided index using
itemList[index] = ask;, we update the localStorage itemList usinglocalStorage.itemList = JSON.stringify(itemList);, and we runrenderList();to update the items in our to-do list.
우리 파일의 끝에서
- First we add a click event listener on the
addBtnelement using- Then we run the
renderList()function to render our list after the page has been loaded and all the Javascript has been executed.
addBtn.addEventListener("click", (e) => {
e.preventDefault();
addEvent();
})
renderList();
유튜브에서 제가 하는 걸 보세요.
노트
In our code, whenever we want to read from localStorage we always use
JSON.parse()and whenever we want to write to it we always useJSON.stringify, this is because we are trying to store and retrieve an array from the localStorage, and localStorage only accept strings. Also the localStorage has a maximum usage limit of 5Mb.
Reference
이 문제에 관하여(Html, CSS 및 Javascript(LocalStorage)를 사용하여 처음부터 Todo-List를 빌드합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/talibackend/build-todo-list-from-scratch-using-html-css-and-javascriptlocalstorage-20h4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
