Create Add Tags Input Box in HTML CSS & JavaScript / Tags Input in JavaScript

Sunday, February 12, 2023 The WsCoder

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 : https://www.youtube.com

Html Code

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;
        }

JavaScript 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 = `&lt;span class=&quot;chip-text&quot;&gt;${tag}&lt;/span&gt;`;
                icon.innerHTML = "&times;";

                // 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 : https://youtu.be/DAIJTjRzxLk

Forms design : https://youtu.be/M2ERkDXjEuw

Responsive CSS card : https://youtu.be/Ol9_5cYtAaw

Navigation design : 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..

Create Add Tags Input Box in HTML CSS & JavaScript / Tags Input in JavaScript

@ Recommendations Videos

Linked

Support

Link

Tools