로직
- 입력해서 아래 리스트로 추가 (엔터로 적용)
- 텍스트를 클릭하면 가로 선이 생긴다.
- 리스트를 마우스 호버해서 삭제버튼을 누르면 삭제가 가능하다.
event.target : 이벤트가 발생된 속성
event.target.tagName : 속성의 tageName을 파악할 수 있다. 태그는 대문자로 작성한다.
classList와 사용할 수 있는 method
- add()
- remove()
- toggle()
- contains() : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인
- replace(oldClass, newClass)
event.target.parentNode : 바로 위의 부모태그
.childNode : 바로 아래 자식태그
.nextSibling : 형제태그
event.which : keypress 된 ㅣㅋ의 유니코드 value를 가져온다.
event.which === 13 : enter 키를 눌렀다면 작동한다.
this.value : input 된 텍스트 value.
.innerHTML : QuerySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML코드를 JavaScript 코드에서 변경 할 수 있다.
.innerText : HTML코드가 그대로 입력되지 않으며, 텍스트로 입력된다.
HTML 소스
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta property="og:type" content="website">
<meta property="og:site_name" content="To-Do List">
<meta property="og:title" content="To-Do List">
<meta property="og:description" content="당신에게 중요한 것들을 대신 기억해드려요!">
<meta property="og:image" content="assets/img/og.png">
<meta property="og:url" content="https://https://miajlee.github.io/todos/">
<title>Todo List</title>
<link rel="stylesheet" type="text/css" href="assets/css/todos.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div id="container">
<h1>To-Do List<i class="fal fa-plus rotated"></i></h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fa fa-trash-alt"></i></span> TIL 작성하기</li>
<li><span><i class="fa fa-trash-alt"></i></span> 여름휴가 숙소 예약하기</li>
<li><span><i class="fa fa-trash-alt"></i></span> 수민이 생일선물 사기</li>
<li><span><i class="fa fa-trash-alt"></i></span> 포기하지 않기 🙄</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>CSS 소스
body {
background: #12c2e9;
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
font-family: "Apple SD Gothic Neo";
}
h1 {
background: #000;
color: white;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: 600;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #333;
}
li:nth-child(2n) {
background: #f7f7f7;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
span {
background-color: #e74c3c;
color: white;
height: 40px;
margin-right: 20px;
text-align: center;
width: 0px;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
input {
font-size: 18px;
background: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
border-style: none;
box-sizing: border-box;
color: #000;
}
input:focus {
background-color: #fff;
border: 3px solid #000;
outline: none;
}
#container {
width: 400px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
.fa-plus {
float: right;
}
.rotated {
transform: rotate(45deg);
}종종 만들어보자!
https://velog.io/@hyounglee/TIL-16#javascript-%EC%86%8C%EC%8A%A4
나는 나