Tags input in CSS and javascript (No Framework)

Is it possible to add this script to Codepen? Your kodhus link does not work anymore?

Very well explained

Nice tutorial. Thanks. But your way to prepend tags is rather complicated. Instead of rebuilding the whole tag container you can simply use insertBefore() to insert the tag right before the tag input field. You also might consider to replace the quite complicated de- and reconstruction of the tag array by simply removing a tag with tags.splice(idx, 1).

Can I use this inside the form? To use tags as input.

EXCELLENT!

I'd rather use innerText instead of innerHTML to assign "label" to "span" for security reasons. Excellent video though.

Please if I don't want to input empty tag how will I do it. Please I need quick answer @frontendTips

Thankyou buddy

how will limit the number of tags and character limit

Daym, not exavtly what I was looking for, but after some tweaks I got it working the way I need. Thanks, playboy

Thank you for the tutorial brother

Can we use splice() method to delete the element?

How to limit the tags to only 3

Thanks, man! You are greate!

thank you!!! I've been searching this for days

the best front end tutorials ever

thank you! good job

Amazing explanation. Thanks man

Do you use OBS to record Screen ?

Can't imagine how much work you've saved me! Legend <3

Thank you, excellent tutorial

What if someone tries to add 'css' tag two more times, so what will happen in this case when we click remove button?

thanks u

now this is what i'm lookin' for.. straight to the point! amazing! thanks for the help :D

awesome video sir. I really surprised. Thanks for your video. sir, I want to learn advanced js. But how?

Nice video. I had some remarkes / suggestions - you certainly can set the attribute "class", but why not just use the direct attribute className instead of using setAtrribute('class')? Similarity, data-* attributes map to dataSet automatically. Why do you need to keep track of your tags into a seperate array - the DOM itself is an array! If you want to know the state of your tags, just call querySelector('.tags') and wham bam you got it your array. Similarily, the use of your clear() and the prepend() structures is cringe worthy and won't scale in general. All you really want to do is the Node.insertBefore() function. Finally, don't be afraid to use the "this" value when you are dealing with events, all you need is <i ... onclick="this.parentNode.removeChild(this); ..."> easy peasy.

how to add limit tag number. please help me

thxxxxxxxxxxxxxxxxxx

great idea

Great job. I'm an experienced developer a I learned quite a bit.

Good tutorial bro

Brilliant tutorial love it. Quick question though, if I wanted to use the 'tags' variable within a POST request how would I select it? Thank you

Very useful tutorial, thank you! I do have a few questions b/c javascript is not my strongest skill:
1. Is it possible to prevent the enter/return key from adding empty tags?
2. How would you add a button to also add the tag?
3. Is it possible to have tags listed alphabetically?

fuck u and thank

Thank you so much!! :))

Great video thank you so much!

One of the best tutorials I've ever seen. Surprising that there are so few views.

It's a great tutorial! Very simple and clean. Waiting a new videos.

Your videos deserve alot more views.

This tutorial is very handy you know... Great!

I’m glad you made this tutorial!!! Thanks man!!!!