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 vote250 views1 answer
Removing leading whitespace from indented HTML source in pre/code tags
Html
-1 vote269 views1 answer
Html vertical text in table cell
Html
1 vote266 views1 answer
Transform bounce css
Html
0 vote259 views1 answer
Store data from html form to database django
Html
0 vote243 views1 answer
Sell html templates
Html
0 vote271 views1 answer
Bootstrap force majuscule class
Html
1 vote254 views1 answer
Bs4 monospace
Html
15 votes275 views3 answers
Bootstrap 4 tooltip
Html
2 votes262 views2 answers
Javascript onclick get event
Html
0 vote278 views1 answer
How to add logo next to title html
Html