<!DOCTYPE html>
<html lang="ko">
<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>
<style>
* {margin: 0; padding: 0;}
h2 {display: inline-block;}
label {float: right;}
header {
color: azure;
padding: 10px;
background: linear-gradient(to left, #e5d713 10%, #27dfb7 50%);
}
.heart {
color: #df5281; flex: 1;
cursor: pointer;
}
.done {
color: #1c941e;
cursor: pointer;
}
.clear {
color: #ad1515;
cursor: pointer;
flex: 1;
}
.content {
flex: 8;
}
.todo-list li {
border-bottom: solid 1px rgb(221, 221, 221);
padding: 15px;
display: flex;
}
#input-box {
border: none;
border-radius: 3px;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h2>Todo 리스트</h2>
<label for="">할 일 추가 <input type="text" id="input-box"></label>
</header>
<section>
<ul class="todo-list">
</ul>
</section>
<script>
document.addEventListener("keyup", function(event) {
let ul태그 = document.querySelector(".todo-list")
let 박스 = document.querySelector("#input-box")
if (event.key == "Enter") {
let li태그 = document.createElement("li")
let 하트
하트 = document.createElement("i")
하트.innerHTML = "favorite_border"
하트.classList.add("material-icons")
하트.classList.add("heart")
li태그.appendChild(하트)
console.log(하트)
하트.addEventListener("click", function() {
if (하트.textContent == "favorite_border") {
하트.textContent = "favorite"
}
else {
하트.textContent = "favorite_border"
}
})
let 내용
내용 = document.createElement("span")
내용.classList.add("content")
내용.textContent = 박스.value
박스.value = ""
li태그.appendChild(내용)
let 묶음
묶음 = document.createElement("span")
묶음.classList.add("manage")
let v
v = document.createElement("i")
v.classList.add("material-icons")
v.classList.add("done")
v.textContent = "done"
묶음.appendChild(v)
v.addEventListener("click", function () {
내용.style.color = "gray"
내용.style.textDecoration = "line-through"
묶음.removeChild(v)
})
let x
x = document.createElement("i")
x.classList.add("material-icons")
x.classList.add("clear")
x.textContent = "clear"
묶음.appendChild(x)
x.addEventListener("click", function () {
ul태그.removeChild(li태그)
})
li태그.appendChild(묶음)
ul태그.appendChild(li태그)
}
})
</script>
</body>
</html>