Please subscribe our channel and support me.
Please like and 1 comment this video.
If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel :
spellcheck="false">https://www.youtube.com
Html Code
<div class="container">
<div class="title">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
id="Layer_1" x="0px" y="0px" width="122.88px" height="105.283px" viewBox="0 0 122.88 105.283"
enable-background="new 0 0 122.88 105.283" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M64.534,2.334l7.463,0.472c0.513-0.035,1.034-0.063,1.567-0.082L120.7,54.051 c3.183,3.465,2.819,8.945-0.69,12.076l-41.5,37c-3.037,2.709-7.527,2.838-10.707,0.541l42.466-37.861 c3.74-3.336,4.128-9.18,0.736-12.871L64.534,2.334L64.534,2.334z M53.067,3.185l45.534,49.581 c3.074,3.348,2.723,8.643-0.667,11.666l-40.089,35.744c-3.387,3.02-8.645,2.719-11.666-0.67L3.422,51.541l0.082-1.414L0,0 l51.549,3.264C52.045,3.23,52.551,3.203,53.067,3.185L53.067,3.185z M20.058,9.77c5.104,0.112,9.154,4.345,9.042,9.45 s-4.345,9.155-9.45,9.042c-5.105-0.112-9.154-4.345-9.042-9.45C10.72,13.707,14.953,9.657,20.058,9.77L20.058,9.77z M28.251,44.743 l29.426,32.062l-5.865,5.385L22.386,50.125L28.251,44.743L28.251,44.743z M41.265,33.13l29.429,32.061l-5.867,5.383L35.399,38.513 L41.265,33.13L41.265,33.13z M53.091,22.061L82.52,54.125l-5.867,5.383L47.226,27.447L53.091,22.061L53.091,22.061z" />
</g>
</svg>
Tags
</div>
<textarea class="textarea" name="textarea" cols="30" rows="10"> tags input in css and javascript,javascript,add tags input in html css javascript,tags input in javascript,tag input in html css javascript,tags input html,add tag input in javascript,add tags input box,add tags input javascript,</textarea>
</div>
Css Code
body {
margin: 0;
padding: 0;
font-family: roboto;
background: #0082ff;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 90vh;
transform: scale(1) !important;
}
.container {
width: 440px;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 5px 20px #0006;
}
.title {
font-weight: 600;
font-size: 20px;
margin-bottom: 30px;
display: flex;
align-items: center;
}
.title svg {
width: 24px;
height: 24px;
margin-right: 10px;
}
.tag-group {
width: -webkit-fill-available;
outline-color: #0082ff;
padding: 5px;
border: solid 1px #888;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
min-height: 200px;
transition: all 0.8s;
}
.tag-group.focus {
box-shadow: 0 0 0 1px #0082ff;
border-color: #0082ff;
}
.tag,
.close-tag,
.tag-group .input {
display: flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
margin: 5px;
border: solid 1px #0004;
border-radius: 20px;
}
.tag {
height: 27px;
}
.close-tag {
padding: 0;
margin-right: 0;
width: 16px;
height: 16px;
cursor: pointer;
background: #ddd;
}
.tag-group .input {
border: none;
outline: none;
font-size: 16px;
}
.tag-count {
margin: 20px auto 10px;
}
Js Code
var tagCreate = function () {
input.focus(), tagNum.innerText = maxTage - tags.length + " tage are remaining";
group.querySelectorAll("tag").forEach(element => element.remove());
tags.slice().reverse().forEach(function (tag) {
let tageList = document.createElement("tag"),
icon = document.createElement("icon");
// Add Class
tageList.classList.add("tag");
icon.classList.add("close-tag");
// Inner Html Set
tageList.innerHTML = `<span class="chip-text">${tag}</span>`;
icon.innerHTML = "×";
// Append Element
tageList.append(icon);
group.prepend(tageList);
icon.addEventListener("click", function (element) {
let index = tags.indexOf(tag);
tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
element.target.parentElement.remove(); tagCreate();
})
})
textarea.innerHTML = null;
tags.slice().reverse().forEach(tag => textarea.insertAdjacentHTML("afterbegin", tag + ","))
}
var maxTage = 20,
textarea = document.querySelector(".textarea"),
group = document.createElement("group"),
input = document.createElement("input"),
tagNum = document.createElement("div");
// Add Class
group.classList.add("tag-group")
input.classList.add("input")
tagNum.classList.add("tag-count")
group.append(input);
textarea.value ? tags = textarea.value.split(",") : tags = [];
textarea.parentElement.append(group, tagNum);
textarea.style.display = "none";
tagCreate();
input.addEventListener("keyup", function (e) {
if (e.key == "Enter") {
let tag = e.target.value.replace(/\s+/g, " ");
if (tag.length > 1 && !tags.includes(tag)) {
if (tags.length < maxTage) {
tag.split(",").forEach(tag => (tags.push(tag), tagCreate()))
}
}
e.target.value = null;
}
})
input.addEventListener("focusin", f => group.classList.add("focus"))
input.addEventListener("focusout", f => group.classList.remove("focus"));
@ Recommendations Videos
blogger theme design : spellcheck="false">https://youtu.be/DAIJTjRzxLk
Login Form : spellcheck="false">https://youtu.be/HWbAr1XN3Lc
Forms design : spellcheck="false">https://youtu.be/M2ERkDXjEuw
Responsive CSS card : spellcheck="false">https://youtu.be/Ol9_5cYtAaw
Navigation design : spellcheck="false">https://youtu.be/LNEgZBdWPGM
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976,
allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and
research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational
or personal use tips the balance in favor of fair use .
Thanks..