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 vote368 views3 answers
Grepper gold
Html
0 vote311 views1 answer
Jquery download text in html element new line
Html
0 vote319 views1 answer
Should the logo be inside the ul in htm
Html
0 vote323 views2 answers
Django html 3.2.4 background image not working
Html
0 vote320 views2 answers
Show text when mouse over button html
Html
9 votes315 views3 answers
Onclick a tag
Html
31 votes274 views6 answers
A tag html
Html
0 vote316 views1 answer
How to include two pictures side by side in Markdown for Jupyter Notebook
Html
0 vote378 views1 answer
I = ["hi", "he",
Html
0 vote289 views1 answer
Remove padding in pre and code
Html