Week2 Mission
2주차 미션! ⭐
- TO DO LIST 만들어보기
JS를 공부하고 좀 더 복잡하고 제대로 된 프로젝트를 만들도록 하였다.
바로바로 TO DO LIST 구현하기 !!!
✔ TO DO LIST 구현 조건
- todo 생성시 생성 시간 표시
- 엔터를 누르면 생성
- input 이 빈 값이면 엔터를 쳐도 생성이 안 되도록
- 삭제 버튼 누르면 해당 todo 삭제
- 스크롤바 항상 아래 고정
작성 코드 💻
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="mission 02.css">
</head>
<body>
<h1>TO DO LIST</h1>
<div class="main">
<form class="" action="mission 02.html" method="post">
<input type="text" placeholder="할 일을 적어봅시다" name="todo">
<button type="submit"><b>ADD</b></button>
</form>
<div class="todolist">
<ul>
</ul>
<a id="delete">DELETE ALL</a>
</div>
</div>
<script type="text/JavaScript" src="mission 02.js"></script>
</body>
</html>CSS
@font-face {
font-family: "IM_Hyemin-Regular";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Regular.woff2")
format("woff");
font-weight: normal;
font-style: normal;
}
* {
font-family: "IM_Hyemin-Regular";
}
.main {
width: 500px;
display: flex;
justify-content: center;
flex-direction: column;
margin: auto;
}
.todolist {
background-color: white;
margin-top: 20px;
padding: 10px 40px 10px 0px;
box-shadow: 3px 3px 3px 3px #e4e4e4;
}
.delete {
position: absolute;
right: 37%;
font-size: 20px;
background-color: #cff0cc;
border-radius: 40px;
text-align: center;
padding: 0% 1%;
color: black;
cursor: pointer;
}
ul {
list-style: none;
}
li {
border-bottom: 1px solid #e4e4e4;
padding-bottom: 15px;
padding-top: 15px;
font-size: 20px;
}
a {
float: right;
text-align: right;
color: red;
font-size: 20px;
cursor: pointer;
}
h1 {
text-align: center;
margin-top: 4%;
margin-bottom: 4%;
}
input[type="text"] {
width: 385px;
height: 30px;
outline: 0;
border: none;
font-size: 23px;
background: white;
margin-right: 10px;
padding: 5px;
}
button {
width: 85px;
height: 40px;
font-size: 1.5em;
background-color: #cff0cc;
border-radius: 4px;
outline: 0;
border: none;
}
JS
'use static';
const init = () => {
document.querySelector('form').addEventListener('submit', AddToDo);
document.getElementById('delete').addEventListener('click', DeleteToDoText);
document.querySelector('ul').addEventListener('click', DelteToDo);
};
//생성 기능
const AddToDo = (e) => {
e.preventDefault();
//사용자가 입력하는 TO DO Value
let toDoValue = document.querySelector('input');
if(toDoValue.value !== '')
//LIST에 넣어주기
AddToDoList(toDoValue.value);
toDoValue.value = '';
};
const AddToDoList = (value) => {
let ul = document.querySelector('ul');
let li = document.createElement('li');
//checkbox, value, delete
li.innerHTML = `<span class="delete">DEL</span><input type="checkbox"><label>${value}</label>`;
ul.appendChild(li);
document.querySelector('.todolist').style.display = 'block';
};TO DO LIST 생성 기능
- if문을 이용하여 사용자가 입력한 value가 비어있지 않으면, AddToDoList 함수를 호출하여 list에 추가해줌.
- 사용자가 입력한 value는 li형태로 추가되고 innerHTML로 화면에는 list가
<span class="delete">DEL</span><input type="checkbox"><label>${value}</label>형식으로 표시되게 함.
//삭제 기능
const DelteToDo = (e) => {
if(e.target.className == 'delete')
//Delete All 실행
DeleteAllToDo(e);
else {
//글씨에 밑줄 표시
CompleteToDo(e);
}
};
const DeleteAllToDo = (e) => {
//Delete All 기능
let remove = e.target.parentNode;
let parentNode = remove.parentNode;
//부모와 자식 노드를 끊어 삭제
parentNode.removeChild(remove);
};
const DeleteToDoText = (e) => {
//Del 기능
let ul = document.querySelector('ul').innerHTML = '';
};TO DO LIST 삭제 기능
- 사용자가 classname .delte을 클릭하면, DeleteAllToDo 함수를 호출하여 삭제하도록 함.
- DeleteAllToDo 함수에는 remove와 removeChild를 이용하여 삭제 기능을 구현함. (removeChild는 부모와 자식 노드를 끊어 완전히 삭제해 주는 기능)
//완료 기능
const CompleteToDo = (e) => {
const todo = e.target.nextSibling;
//체크박스에 체크를 하면,
if(e.target.checked){
//색 변화
todo.style.color = "#e4e4e4";
todo.style.textDecorationLine = "line-through"
}else {
todo.style.color = "#000000";
todo.style.textDecorationLine = ""
}
};
init();TO DO LIST 완료 기능
- if 조건문과 checkbox를 이용하여 사용자가 checkbox를 클릭하면, 글자색이 변하고 취소선 표시가 되도록 함.
추가로 찾아본 내용
- preventDefault
a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다.
preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.
출처: [개발자 아저씨들 힘을모아]
실행 화면
트러블슈팅
(띠용,, 잘 실행되다가 함수 선언문으로 작성한 함수들을 화살표 함수로 바꾸었더니 페이지가 작동하지 않는다는 오류가 떴다. 😦
한참을 찾아보고 알아본 결과, 함수 선언식과 화살표 함수의 차이점을 알아보니 단번에 오류 이유를 찾을 수 있었다.
가장 큰 차이점인 호이스팅!!! 때문이었다.
호이스팅(hoisting)
개념: 끌어올림.
즉 코드에서 함수나 변수를 코드의 하단부에 선언했다고 하더라도 코드의 상단부에서 함수를 호출(실행) 할 수 있는 JavaScript 만의 특징이다.
화살표 함수로 고쳤음에도 불구하고 실행을 의미하는 init()함수를 맨 위에 선언한 채로 실행을 해서 안 됐던 것이었다. 함수 선언식은 호이스팅이 가능하기 때문에 init() 함수를 위에서 미리 선언해놓고 실행해도 잘 실행이 되는 것이었다.
결론 : 화살표 함수를 사용할거면 반드시 함수 전에 함수를 미리 호출하지 말 것 ❕❕
이렇게 오류를 맛보고 호이스팅 개념에 대해 잘 익혔으니 됐다고 생각한다 (휴우.)
오.. 호이스팅으로 인한 문제였군요 🤔
이 부분에 대해서는 스코프에 대한 개념을 알면 좋습니당.
그리고 이런 문제에 대해서 방지하기 위해 모든 함수들은 최상단에 선언하게됩니다!