checklist.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>To do list</title>
<link rel="stylesheet" href="input.css">
<link rel="stylesheet" href="list.css">
</head>
<body>
<div id="wrapper">
<h2>체크리스트</h2>
<form>
<input type="text" id="item" autofocus>
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemList"></div>
</div>
<script src="checklist.js"></script>
</body>
</html>
checklist.js
var itemList = [];
var addBtn = document.querySelector('#add'); // #add인 요소를 가져와 addBtn으로 저장
addBtn.addEventListener('click', addList); // addBtn을 클릭하면 addList 함수 실행
function addList() {
var item = document.querySelector('#item').value;
if(item != null) {
itemList.push(item);
document.querySelector('#item').value = ''; // id = 'item'인 요소 값을 지움
document.querySelector('#item').focus(); // 텍스트 필드에 focus() 함수 적용
}
showList();
}
function removeList() {
var id = this.getAttribute("id"); // this(누른 삭제 버튼)의 id 값을 가져와 id 변수에 저장
itemList.splice(id, 1); // itemList 배열에서 인덱스 값이 id인 요소 1개 삭제
showList(); // 변경된 itemList 배열을 다시 화면에 표시
}
function showList() {
var list = "<ul>";
for (var i = 0; i < itemList.length; i++) {
list += "<li>" + itemList[i] + "<span class='close' id=" + i + ">X</span></li>";
}
list += "</ul>";
document.querySelector("#itemList").innerHTML = list;
var remove = document.querySelectorAll(".close"); // class = 'close'인 요소들을 모두 가져와 배열 형태로 저장
for (var i = 0; i < remove.length; i++) { // remove 배열의 모든 요소를 확인
remove[i].addEventListener("click", removeList); // 요소를 클릭하면 removeList() 실행
}
}
input.css
* {
box-sizing:border-box;
}
#wrapper {
width:600px;
margin:0 auto;
}
h2 {
text-align:center;
}
form {
background-color:#007acc;
padding:30px 40px;
color:white;
text-align:center;
}
input {
border:none;
width:440px;
padding:10px;
float:left;
font-size:16px;
}
.addBtn {
padding:10px;
width:50px;
border:none;
background-color:#fff;
box-shadow:1px 2px 4px #167dae;
color:#555;
text-align:center;
font-size:14px;
cursor:pointer;
transition:0.3;
}
form::after {
content:"";
display:table;
clear:both;
}
list.css
form::after {
content:"";
display:table;
clear:both;
}
ul{
margin:0;
padding:0;
list-style: none;
}
ul li{
cursor:pointer;
position:relative;
padding:12px 8px 12px 40px;
background: #eee;
font-size:18px;
transition: 0.2s;
}
ul li:nth-child(odd) {
background-color:#f9f9f9;
}
ul li:hover {
background-color:#ddd;
}
.close {
position:absolute;
right:0;
top:0;
padding:12px 16px;
border:none;
background:rgba(255,255,255,0)
}
.close:hover {
background-color:#007acc;
color:white;
}728x90
반응형
'Language > Javascript' 카테고리의 다른 글
| 자바스트립트) 체크리스트 만들기2 (0) | 2022.01.21 |
|---|
