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

1 vote163 views2 answers
Class required bootstrap 3
Html
2 votes162 views1 answer
Html change viewport to smartphone size
Html
1 vote157 views1 answer
Slider flash
Html
0 vote166 views1 answer
Service worker symfony webpack encore
Html
0 vote166 views1 answer
Css animation fade out after delay
Html
0 vote171 views1 answer
How to stop marquee text when you move your mouse over it
Html
1 vote193 views1 answer
How to render a sprite in html5
Html
3 votes206 views9 answers
Bootstrap 5
Html
86 votes172 views6 answers
Markdown cheat sheet
Html
44 votes181 views6 answers
Html bold
Html