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

9 votes107 views2 answers
Html make a clickable link
Html
0 vote104 views1 answer
Html input time default value
Html
0 vote114 views1 answer
How to put more than one javascript function in an html tag
Html
0 vote105 views1 answer
How to serve webP images with fallback
Html
8 votes93 views1 answer
HTML HOME
Html
1 vote103 views1 answer
Html link para descargar archivo de audio
Html
0 vote106 views1 answer
Bootstrap modal causes page shift
Html
0 vote111 views1 answer
Textbox password php
Html
2 votes53 views1 answer
Open a new html page on button click
Html
0 vote87 views1 answer
Get city from location html
Html