Great video and awesome tutorial topic, sir. I appreciate the attention you give to the little things, such as making sure to pronounce certain keywords with greater annunciation to avoid typos, which will naturally be followed by errors. Haha. It's pretty rare that I see that, so thank you. Keep it up, brother, and I trust that you will eventually achieve your goal (best [programming/dev] channel on RUclips). 🙏😌
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 easy peasy.
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).
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?
One of the best tutorials I've ever seen. Surprising that there are so few views.
I agree. Love when they start from beginning and not jump into a partially completed example.
Just hit the like button bro!
Daym, not exavtly what I was looking for, but after some tweaks I got it working the way I need. Thanks, playboy
Can't imagine how much work you've saved me! Legend
heyy this not working for me.Can you please help!!
now this is what i'm lookin' for.. straight to the point! amazing! thanks for the help :D
For simple tag box: ruclips.net/video/mpab1b4jvXg/видео.html
the best front end tutorials ever
Great job. I'm an experienced developer a I learned quite a bit.
I’m glad you made this tutorial!!! Thanks man!!!!
It's a great tutorial! Very simple and clean. Waiting a new videos.
Thank you, excellent tutorial
thank you!!! I've been searching this for days
This tutorial is very handy you know... Great!
Your videos deserve alot more views.
Great video and awesome tutorial topic, sir. I appreciate the attention you give to the little things, such as making sure to pronounce certain keywords with greater annunciation to avoid typos, which will naturally be followed by errors. Haha. It's pretty rare that I see that, so thank you. Keep it up, brother, and I trust that you will eventually achieve your goal (best [programming/dev] channel on RUclips).
🙏😌
great idea
Great video thank you so much!
Very well explained
thanks u
Thankyou buddy
Thanks, man! You are greate!
EXCELLENT!
Amazing explanation. Thanks man
What if someone tries to add 'css' tag two more times, so what will happen in this case when we click remove button?
Thank you for the tutorial brother
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 easy peasy.
how to add limit tag number. please help me
awesome video sir. I really surprised. Thanks for your video. sir, I want to learn advanced js. But how?
thank you! good job
Good tutorial bro
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).
Thank you so much!! :))
I'd rather use innerText instead of innerHTML to assign "label" to "span" for security reasons. Excellent video though.
Is it possible to add this script to Codepen? Your kodhus link does not work anymore?
Please if I don't want to input empty tag how will I do it. Please I need quick answer @frontendTips
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?
input.addEventListener('keyup', function(e){
// Add this statement to not print empty tags
if(input.value != ''){
if(e.key === 'Enter'){
.....
}
}
@@marshallchaterera2069 is it possible I also insert tag with tab button like enter key
prathamesh shende yes you do:
if(e.keyCode == 13) {
// do something
}
how will limit the number of tags and character limit
Can I use this inside the form? To use tags as input.
Do you use OBS to record Screen ?
Can we use splice() method to delete the element?
hello.new friend
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
** place a button with save class on the document
function handleClick(e) {
if (e.target.classList.contains("save")) {
fetch("url", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
keywords: tags
})
})
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
})
.catch(err => {
console.log("Error :-S", err);
});
}
}
How to limit the tags to only 3
thxxxxxxxxxxxxxxxxxx
You can make tag box more simply: ruclips.net/video/mpab1b4jvXg/видео.html