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

0 vote179 views1 answer
Chrome input autocomplete not working
Html
0 vote184 views1 answer
How to make a dark mode html
Html
56 votes167 views6 answers
How to make a button link in html
Html
-1 vote150 views3 answers
Vue if
Html
0 vote146 views1 answer
Html stroke width not working
Html
8 votes141 views1 answer
Easy Learning with HTML "Try it Yourself"
Html
-1 vote146 views1 answer
Negritas html
Html
0 vote149 views6 answers
Hash password decrypt laravel
Html
0 vote127 views1 answer
Twig form row label
Html
2 votes195 views3 answers
Auto update copyright year html
Html