<!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>
</head>
<body>
<h3>step1</h3>
<h2>To Do List</h2>
<button class="remove">전체삭제</button>
<div display="normal" class="box">
<input type="text" name="" class="id" placeholder="이름">
<button class="idBtn" onclick="idpush()">확인</button>
</div>
<div class="msg"></div>
<input type="text" name="" class="todo" placeholder="할일을 적어봐!">
<button class="todoBtn" onclick="todopush()">확인</button>
<ul class="list">
</ul>
<script>
var box = document.querySelector('.box');
var del = document.querySelector('.remove');
var id = document.querySelector('.id');
var todo = document.querySelector('.todo');
var msg = document.querySelector('.msg');
var todoBtn = document.querySelector('.todoBtn');
var idBtn = document.querySelector('.idBtn');
var ul = document.querySelector('.list');
var removeAll = document.querySelector('.remove');
function idpush(){
console.log(id.value);
msg.innerHTML = id.value + '님 환영합니다';
box.style.display = "none";
}
function todopush(){
var li = document.createElement("li");
li.innerHTML = todo.value;
//삭제 버튼
var btn = document.createElement("button");
btn.innerHTML = "X";
btn.ondblclick = remove;
//up
var up = document.createElement("button");
up.innerHTML = "up";
up.onclick = upfunc;
//down
var down = document.createElement("button");
down.innerHTML = "down";
down.onclick = downfunc;
li.appendChild(btn);
li.appendChild(up);
li.appendChild(down);
ul.appendChild(li);
todo.value="";
}
function remove(){
this.parentElement.remove();
console.log(this.parentElement);
}
function upfunc(){
var curr = this.parentElement;
var prev = this.parentElement.previousElementSibling;
console.log(prev);
if(prev==null){
return;
}
ul.insertBefore(curr,prev);
}
function downfunc(){
var curr = this.parentElement;
var next = this.parentElement.nextElementSibling;
if(next==null){
return;
}
ul.insertBefore(next,curr);
}
removeAll.onclick = function(){
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
lis[i].remove();
}
}
id.addEventListener("keyup", function(event){
if(event.keyCode === 13){
idpush();
}
})
todo.addEventListener("keyup", function(event){
if(event.keyCode === 13){
todopush();
}
})
</script>
</body>
</html>
