<!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>Document</title>
<script src="./script.js"></script>
</head>
<body onload="initialize()">
<div style="display:flex;align-items:center;justify-content:center;">
<input type="text" id="work"/><button onclick="add()">Add</button>
</div>
<div style="display:flex; justify-content: space-evenly;">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
<h1>To Do</h1>
<ol>
</ol>
</div>
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
<h1>Done</h1>
<ol>
</ol>
</div>
</div>
</body>
</html>
<script>
<!-- 1. Must define functions add(), check(elem)
2. add function
2-1. Get input content
2-2. Creates an element to add to the to-do list
2-3. Also assigned a check function
2-4. Add the created element to the to-do list
3. check function
3-1. Determine whether to check
3-2. What if it is checked? After deleting from the Korea-to-do list, move to the to-do list
3-3. What if it is not checked? Delete from to-do list and move to to-do list
(1. 함수를 정의해야함 add(), check(elem)
2. add 함수
2-1. 인풋(input)내용을 가져옴
2-2. 할일목록에 추가할 Element를 생성함
2-3. check함수도 할당함
2-4. 생성한 Element를 할일목록 추가
3. check 함수
3-1. 체크 여부를 판단함
3-2. 만약 체크가 되어있다면? 한일 목록에서 삭제 후 할일 목록으로 이동
3-3. 만약 체크가 되어있지않다면? 할일 목록에서 삭제후 한일 목록으로 이동)
-->
// 1. Check if there is an existing list in the local storage.
// (로컬스토리지에 기존에 작성된 목록이 있는지 확인한다.)
// 2. Add each local storage list, if any.
// (만약 있다면 각 로컬스토리지 목록을 추가한다.)
// 3. When adding a task, it is added to the local storage list.
// (할일 추가시 로컬스토리지 목록에 추가한다.)
// 4. Apply to the local storage list when completion is checked or unchecked.
// (완료체크 혹은 체크해제시 해당 로컬스토리지 목록에 적용한다.)
let doList ;
let toDoList;
let delbtn;
function initialize(){
let toDostorage = localStorage.getItem('toDo');
let doStorage = localStorage.getItem('do');
doList = document.querySelector('div>div:nth-of-type(2)>ol');
toDoList = document.querySelector('div>div:nth-of-type(1)>ol');
if(toDostorage!=null || doStorage!==''){
toDoList.innerHTML=toDostorage;
}
if(doStorage!=null || doStorage!==''){
doList.innerHTML=doStorage;
}
let doElements = doList.querySelectorAll('li>label>input');
// let doElements = selectAll(doListt);
let toDoElements = toDoList.querySelectorAll('li>label>input');
// let toDoElements = selctAll(todoListt);
doElements.forEach(each=>{
each.checked=true;
each.addEventListener('click',()=>check(each));
// doElements.forEach(addCheckEvent);
});
toDoElements.forEach(each=>{
each.addEventListener('click',()=>check(each));
// toDoElements.forEach(addCheckEvent);
});
document.querySelectorAll('li>button').forEach(each=>{
each.addEventListener('click',(e)=>delToDo(e));
})
}
// function selectAll(elem){
// return elem.querySelectorAll('li>label>input');
// }
// function addCheckEvent(elem){
// elem.addEventListener('click',()=>(elem));
// }
function delToDo(elem){
let button = elem.target;
let li = button.parentElement;
li.remove()
toDoList = document.querySelector('div>div:nth-of-type(1)>ol');
doList = document.querySelector('div>div:nth-of-type(2)>ol');
localStorage.setItem('do',doList.innerHTML);
localStorage.setItem('toDo',toDoList.innerHTML);
}
function add(){
let work = document.getElementById('work').value;
console.log(work);
let toDo = document.createElement('li');
let label = document.createElement('label');
let input = document.createElement('input');
delbtn = document.createElement('button');
delbtn.innerText="❌";
delbtn.addEventListener("click",(e)=>delToDo(e));
let textData = document.createTextNode(work);
console.log(textData);
input.type='checkbox';
// input.setAttribute('onclick','check(this)'); //bad case
input.addEventListener('click',()=>check(input)); //best case
label.appendChild(input);
label.appendChild(textData);
toDo.appendChild(label);
toDo.appendChild(delbtn);
console.log(label);
let todoListt = document.querySelector('div>div:nth-of-type(1)>ol')
todoListt.appendChild(toDo);
localStorage.setItem('toDo',todoListt.innerHTML);
}
function check(elem){
doList = document.querySelector('div>div:nth-of-type(1)>ol');
toDoList = document.querySelector('div>div:nth-of-type(2)>ol');
let epp = elem.parentElement.parentElement;
if(elem.checked===true){
toDoList.appendChild(epp);
// to-do done(할일 완료)
}else if(elem.checked === false){
doList.appendChild(epp);
// recover to do(할일로 복구)
}
localStorage.setItem('toDo',doList.innerHTML);
localStorage.setItem('do',toDoList.innerHTML);
}
// if(elem.checked===true){
// document.querySelector('div>div:nth-of-type(2)>ol').appendChild(elem.parentElement.parentElement);
// }else if(elem.checked===false){
// document.querySelector('div>div>:nth-of-type(1)>ol').appendChild(elem.parentElement.parentElement);
// }
// }
</script>
I`m Studying Bankend