Word count alpine js

<div x-data="{ wordCount: 0 }" x-init="wordCount = $el.querySelector('textarea').value.trim().split(' ').length;">
  
  <textarea class="form-input border" rows=5 @keyup="wordCount = $event.target.value.trim().split(' ').length;"></textarea>
       
  <p class="text-xs" :class="wordCount < 20 ? 'text-red-700' : 'text-green-700'">Word counts: <span x-html="wordCount"></span> min: 20</p>
</div>

Source: codepen.io

Similar codes

2 votes174 views2 answers
Material ui width textfield
Html
1 vote212 views1 answer
Js cannot copy entire object
Html
1 vote171 views1 answer
How to add an image to my web page from my computer
Html
3 votes182 views1 answer
Nuxt select option v-for
Html
212 votes259 views6 answers
Open link in new tab html
Html
0 vote184 views2 answers
Html.raw to list model
Html
9 votes162 views2 answers
Html footer
Html
0 vote195 views1 answer
Html table row_coloumn customization
Html
0 vote188 views1 answer
Fil text are with select html textarea
Html
2 votes159 views2 answers
Webdriver manager
Html