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 vote251 views1 answer
How to include two pictures side by side in Markdown for Jupyter Notebook
Html
0 vote252 views1 answer
Text box border css
Html
0 vote257 views1 answer
The library'package:firebase_core/firebase_core.dart' is legacy
Html
0 vote277 views1 answer
Hugo theme from html to md file
Html
0 vote247 views1 answer
Theme colur in html
Html
0 vote264 views2 answers
How to execute asp code in html
Html
0 vote236 views1 answer
Sdfsdfsd
Html
4 votes246 views2 answers
How to center text in svg
Html
1 vote256 views1 answer
Html required checkbox
Html
8 votes235 views2 answers
Html rupee symbol
Html