More tutorials ?

[iamshulz]

In case if you are interested in making more tutorial (I really hope so)

Can you do tutorial where we create a tag on an input and whenever we press enter a new tag will be added but if there are too many tags in the input the others will not be shown

[larxn]

Hi, Oliver. Thanks for your kind words. Do you have an example of how that component would look like?

[iamshulz]

Somewhat like this I can also set the maximum number of tags so the input field would not expand when there are many tags. https://github.com/vueform/multiselect

[larxn]

Oh, at first glance it looks like it would have this structure:

<div class="container">
  <div class="tag-list">
    <div class="tag"></div>
  </div>
  <input v-model="search">
</div>

And then the input disappears when .container is no longer focused. It doesn't seem that complicated. What do you think?

[iamshulz]

You're right think that is the main structure (also from the video I've seen).
I think the more complicated part is the making of dropdown ? (probably) because it has to be done from scratch and also the dynamic width input width size.

[larxn]

Well, a <datalist> may be helpful:

<input id="color" list="suggestions">
<datalist id="suggestions">
    <option value="Black">
    <option value="Red">
    <option value="Green">
    <option value="Blue">
    <option value="White">
</datalist>

https://teamtreehouse.com/community/creating-a-suggestion-list-for-html-form-input-elements

[larxn]

Having a good foundation of CSS can really untie your creativity.

[petrasvestartas]

Does it support videos?

[larxn]

Hi, @petrasvestartas. You mean like thumbnails or actual video players? I think it should work on both cases, but haven't tried.

I would recommend you to use a professional grade library though; something like swiper.js.

[petrasvestartas]

Yesterday night I tried swiper, it worked quite well with version of swiper 6. Thank you for reference.