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 vote146 views2 answers
Types of routes in laravel
Html
252 votes486 views6 answers
CDN Bootstrap 5
Html
0 vote206 views1 answer
Como hacer un boton flotante de volver arriba en html
Html
1 vote199 views1 answer
Javascript prevent pinch zoom
Html
27 votes374 views3 answers
Html code editor
Html
6 votes196 views1 answer
Removeable hyperlink line html
Html
1 vote184 views1 answer
External javascript file not working
Html
17 votes192 views6 answers
Collapse bootstrap
Html
0 vote186 views1 answer
How to show only play button in html audio controls
Html
0 vote203 views1 answer
How to select value in ul li tag in html
Html