How To Count Number Of Vowels And Consonants

Submitted by alpha_luna on Thursday, April 28, 2016 - 15:01.
Related Code: Counter For Numbers, Vowels, And Consonants Using JavaScript In this article, we are going to program on How To Count Number Of Vowels And Consonants. We create this program using HTML and JavaScript. This program will ask the user to type their words or a sentence that the program will count all the vowels and consonants in the given of the user. Form Field - HTML This source code where the user types their desired word or sentence to count the vowels and consonants and it will show abrupt.
  2. <br />
  3. <br />
  4. <b>Enter a word or a sentence</b>
  5. <br />
  6. <br />
  7. <textarea id='User_Enter' autofocus="autofocus"></textarea>
  8. <br><br>
  9. <input type='button' onclick='VowelsConsonants_Counts()' value='Count'/>
  10.      
  11. <input type='button' onclick='clear_now()' value='Clear'/>
  12. </form>
  13. <br     />
  14. <br     />
  15. <br     />
  16. <div class="results" id='word_string'></div>
  17. <br />
  18. <br />
  19. <div class="results" id='vowels'> </div>
  20. <div class="results" id='consonants'> </div>
JavaScript Code This script will execute after the user gives a word or sentence and click the "Count" button to count the consonants and vowels.
  1. <script>
  2. function VowelsConsonants_Counts()
  3.  {
  4. var TextVar = document.getElementById('User_Enter').value;
  5. if (TextVar.length==0) {
  6.  document.getElementById('User_Enter').focus();
  7.  alert("Sorry cannot be empty");
  8.  }
  9. else {
  10. document.getElementById('word_string').innerHTML = "The word or sentence is <br />"
  11. + "<font color='red'>" +TextVar + ".</font>";
  12. document.getElementById('vowels').innerHTML = "<font color='red'>Number of Vowels :</font> "
  13.  + vowel_count(TextVar);
  14. document.getElementById('consonants').innerHTML = " <font color='red'>Number of Consonants :</font> "
  15.  + consonants_count(TextVar);
  16.  }
  17. }
  18. function clear_now()
  19. {
  20.  document.getElementById('User_Enter').value="";
  21.  document.getElementById('word_string').innerHTML="";
  22.  document.getElementById('vowels').innerHTML="";
  23.  document.getElementById('consonants').innerHTML="";
  24.  document.getElementById('User_Enter').focus();
  25. }
  26.  
  27. function vowel_count(str1)
  28. {
  29.  var vowel_list = 'aeiouAEIOU';
  30.  var vcount = 0;
  31.  
  32.  for(var x = 0; x <str1.length ; x++)
  33.  {
  34. if (vowel_list.indexOf(str1[x]) !== -1)
  35. {
  36.  vcount += 1;
  37. }
  38.  
  39.  }
  40.  return vcount;
  41. }
  42. function consonants_count(str1)
  43. {
  44.  var consonant_list = ' bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ';
  45.  var c_count = 0;
  46.  
  47.  for(var x = 0; x <str1.length ; x++)
  48.  {
  49. if (consonant_list.indexOf(str1[x]) !== -1)
  50. {
  51.  c_count += 1;
  52. }
  53.  
  54.  }
  55.  return c_count;
  56. }
  57. </script>
And, this is the style of the program.
  1. <style type="text/css">
  2. body {
  3.         margin:auto;
  4.         width:300px;
  5. }
  6. b {
  7.  font-family:arial;
  8.  color:blue;
  9.  font-size:18px;
  10.  }
  11.  .results {
  12.  font-weight: bold;
  13.  font-family:arial;
  14.  font-size:18px;
  15.  color:blue;
  16. }
  17. textarea {
  18.         width: 260px;
  19.     height: 100px;
  20.  display: block;
  21.  font-family: arial;
  22.  font-size: 18px;
  23.  border-radius: 2px;
  24.  box-shadow: 5px 5px 5px red;
  25.  border:blue 1px solid;
  26.  text-indent:10px;
  27. }
  28. textarea:focus {
  29.  outline: none;
  30.  border:red 1px solid;
  31. }
  32. input[type=button] {
  33. padding:10px;
  34. background:azure;
  35. border:blue 1px solid;
  36. cursor:pointer;
  37. -webkit-border-radius: 12px;
  38. box-shadow: 5px 5px 5px red;
  39. border-radius: 5px;
  40. font-family: arial;
  41. font-size: 18px;
  42. }
  43. </style>
Related Code: Counter For Numbers, Vowels, And Consonants Using JavaScript Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Consonants Vowels WhiteSpace and Digits Counter
Consonants Counter
Counting vowels and consonants
count number of vowels

Add new comment

About text formats
  • 478 views