<body>
<div class="wrapper">
<div class="title">
<h2><span class="ez-toc-section" id="Search_Tags"></span>Search Tags<span class="ez-toc-section-end"></span></h2>
</div>
<div class="content">
<ul>
<input type="text" spellcheck="false" placeholder="Type and enter" />
</ul>
</div>
<button class="btn-removeAll">Remove All</button>
</div>
<script src="app.js"></script>
</body>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #8cc84c;
}
.wrapper {
width: 500px;
background: #fff;
border-radius: 10px;
padding: 18px 25px 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
}
.title h2 {
font-size: 21px;
font-weight: 600;
}
.content ul {
display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 20px 0;
border-radius: 5px;
border: 1px solid #888;
}
.content ul li {
color: #333;
margin: 4px 3px;
list-style: none;
border-radius: 5px;
background: #8cc84c;
padding: 5px 8px 5px 10px;
color: white;
}
.content ul li i {
margin-left: 8px;
font-size: 16px;
cursor: pointer;
}
.content ul input {
flex: 1;
padding: 5px;
border: none;
outline: none;
font-size: 16px;
}
button {
border: none;
outline: none;
color: #fff;
font-size: 16px;
cursor: pointer;
padding: 9px 15px;
border-radius: 5px;
background: #8cc84c;
transition: all 0.3s ease;
}
button:hover {
background: #7cac49;
}
const ul = document.querySelector('ul'),
input = document.querySelector('input')
let tags = ['nodejs', 'reactjs']
createTag()
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> createTag() {
ul.querySelectorAll('li').forEach((li) => li.remove())
tags.slice().reverse().forEach((tag) => {
let liTag = `
<li>${tag}
<i class="uit uit-multiply" onclick="removeTag(this, '${tag}')"></i>
</li>
`
ul.insertAdjacentHTML('afterbegin', liTag)
})
input.focus()
}
function removeTag(element, tag) {
let index = tags.indexOf(tag)
tags.splice(index, 1)
element.parentElement.remove()
input.focus()
}
function addTag(e) {
if (e.key == 'Enter') {
let tag = e.target.value.trim()
if (tag != '' && !tags.includes(tag)) {
tags.push(tag)
createTag()
}
e.target.value = ''
}
}
input.addEventListener('keyup', addTag)
const removeBtn = document.querySelector('.btn-removeAll')
removeBtn.addEventListener('click', () => {
tags.length = 0
ul.querySelectorAll('li').forEach((li) => li.remove())
input.focus()
})
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
