EffectiveJava를 공부하다가 심심해서.. 태그 기능을 한번 만들어봤습니다.
소스코드는 다음과 같습니다
HTML 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tag 구현하기</title>
<link rel="stylesheet" href="resources/stylesheets/index.css">
</head>
<body>
<div id="wrap">
<p>태그를 달아보자!</p>
<div id="tag-list">
<input id="tag" type="text" class="input-tag" placeholder="태그를 입력하고 엔터를 쳐주세요">
</div>
</div>
<script src="./resources/javascripts/index.js"></script>
</body>
</html>CSS 소스 코드
* {
margin: 0;
padding: 0;
font-size: 14px;
}
html, body {
height: 100%;
}
#wrap {
padding: 20px;
}
.input-tag {
width: 400px;
border: 0;
}
.input-tag:focus {
outline: transparent;
}
#tag-list {
margin: 20px 0;
}
#tag-list > .tag {
display: inline-block;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 20px;
margin: 5px;
color: #FFFFFF;
background-color: #4DB6AC;
cursor: pointer;
}
Javascript 소스 코드
const tagIsEmpty = tag => {
if (tag == undefined || tag == null || tag.length <= 0) {
alert("태그가 비어있습니다.");
return false;
}
return true;
};
const makeTag = tag => {
const tagWrap = document.createElement("div");
tagWrap.className = "tag";
tagWrap.addEventListener("click", removeTag);
const tagTitle = document.createElement("p");
tagTitle.textContent = tag;
tagWrap.appendChild(tagTitle);
return tagWrap
};
const appendTag = (parentId, referenceId, newNode) => {
const parentElement = document.querySelector(`#${parentId}`);
const referenceElement = document.querySelector(`#${referenceId}`);
parentElement.insertBefore(newNode,referenceElement );
};
const clearTextContent = targetId => {
const target = document.querySelector(`#${targetId}`);
target.value = '';
};
const addTag = e => {
const {keyCode, target} = e;
const {value: tagText} = target;
if (keyCode == 13 && tagIsEmpty(tagText)) {
appendTag("tag-list", "tag", makeTag(tagText));
clearTextContent("tag");
}
};
const removeTag = e => {
e.currentTarget.remove();
};
const tagInput = document.querySelector("#tag");
tagInput.addEventListener("keyup", addTag);
Front&BaackEnd를 재미있게 공부하고싶은 개발자 YundleYundle