📌투두리스트 만들기
자바스크립트를 배우면 가장 많이 하는 투두리스트 만들기를 해보았습니다.
아직 배운지 2달 남짓이라 좀 더 디테일한 구성은 짜지는 못했습니다.
가장 기본적인 부분들만 작업해봤습니다.
부족한 부분이 있다면 코멘트도 언제든 환영입니다!😃
TO DO LIST
1. 할일추가 버튼을 누르면 할일 리스트 추가
2. 리스트 클릭 시 줄긋기 이벤트 발생 (addEventListener)
3. 리스트 더블 클릭 시 이벤트 발생 리스트 삭제
4. 로컬 스토리지에 리스트 저장
5. 리스트 삭제 시 로컬스토리지 자동 삭제 기능 추가
먼저 HTML코드를 작성 해줍니다.
<!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>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<h1>📝 To do list</h1>
</div>
<div class="container">
<input id="inputField" type="text"> <!-- text 입력창 만들기 -->
<button id="addToDo">할일추가</button> <!-- + 버튼 만들기 -->
<div class="to-dos"> </div> <!-- id = inputField에 할일이 입력되고
+ 버튼이 눌리면 할일이 나타날 공간 만들기 -->
<ul id="toDoList"></ul>
</div>
</body>
<script src="/todo list 1/js/script.js"></script>
</html>script코드로 설정한 id값들을 불러옵니다.
let inputBox = document.getElementById('inputField');
let addToDo = document.getElementById('addToDo');
let toDoList = document.getElementById('toDoList');이제 함수로 이벤트를 추가해 줍니다.
일단 input창에 텍스트 입력 시 'li'가 생성 되도록 변수를 선언합니다.
addToDo.addEventListener('click', function(){
let list = document.createElement('li');자 여기서 만약 input 창에 입력값이 없을 경우 알림창이 뜨게 할 겁니다.
그 내용을 if else문으로 작성 해주었습니다.
if(!inputBox.value){
alert('내용입력해야죠!');
}else{
list.innerText = inputBox.value;//값을 가져온다.
toDoList.appendChild(list);
inputBox.value = '';//입력 버튼누르면 input창은 비워준다.
}만약 내용이 입력된게 맞다면 else 문 안의 내용을 실행하게 됩니다.
⭐️ 그리고 저는 addEventListener를 함수로 정리해주었습니다.
- 리스트 클릭 시 줄긋기 이벤트 발생 (addEventListener)
- 리스트 더블 클릭 시 이벤트 발생 리스트 삭제
function complete(elem){
elem.addEventListener('click', function(){
elem.className = 'complete';//style.css에서 가져왔습니다.
})
}
function remove(elem){
elem.addEventListener('dblclick', function(){
toDoList.removeChild(elem);
})
}⭐️ +style.css 코드 추가
html, body {
width: 50%;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 360px;
}
.complete{
text-decoration: line-through;
color: pink;
}
#inputFiled {
width: 300px;
height: 46px;
border: 1px solid black;
outline: none;
font-size: 25px;
vertical-align: middle;
}
.to-dos {
margin-top: 25px;
}
#toDoList {
font-size: 25px;
}여기까지 잘 실행이 되었다면 이런 결괏값이 나올겁니다.
한번 클릭 시 라인이 쳐지고 핑크색으로 변하게 이벤트를 추가했습니다.
더블 클릭 시 리스트에서 삭제 되게 하였습니다.
📌 여기까지가 제가 구현한 투두리스트 구현이었습니다.
추가로 이걸 localStorage에 저장되고 또 삭제가 되도록 코드를 수정합니다.
- 로컬 스토리지에 리스트 저장
- 리스트 삭제 시 로컬스토리지 자동 삭제 기능 추가
로컬스토리지에 리스트가 저장될 수 있게 initialize함수를 선언합니다.
function initialize(){
toDoList.innerHTML = localStorage.getItem('list');
let toDoElments = toDoList.querySelectorAll('li');
toDoElments.forEach(each=>{
complete(each); //위에 함수 값 가져오기
remove(each); //위에 함수 값 가져오기
})
}여기서 함수를 작성 후 index.html body에 onload를 추가해줍니다.
<body onload="initialize()"> //⭐️⭐️⭐️
<div>
<h1>📝 To do list</h1>
</div>
<div class="container">
<input id="inputField" type="text"> <!-- text 입력창 만들기 -->
<button id="addToDo">할일추가</button> <!-- + 버튼 만들기 -->
<div class="to-dos"> </div> <!-- id = inputField에 할일이 입력되고
+ 버튼이 눌리면 할일이 나타날 공간 만들기 -->
<ul id="toDoList"></ul>
</div>
</body>
<script src="./js/script.js"></script>
</html>그럼 로컬스토리지에 저장되는 것은 실현이 될 겁니다.
확인은 개발자 도구창에 Application창을 확인해 봅니다.
이제 remove 함수 즉 더블클릭 시 리스트가 삭제 될 때 로컬스토리지에서도
함께 삭제 될 수 있게 코드를 작성 해줍니다.
더블 클릭 시 실행되는 내용이기 때문에 저는 remove 함수 안에
추가해주었습니다.
function remove(elem){
elem.addEventListener('dblclick', function(){
toDoList.removeChild(elem);
localStorage.setItem('list', toDoList.innerHTML);
// 내용을 지운다가 아니라, 이너 HTML의 값을 덮어씌운 것임.
})
}여기서 중요한 것은 로컬스토리지를 지운다는 동작이라기 보다.
리스트가 지워진 innerHTML을 다시 덮어 씌워주어서 구현하였습니다.
