How To Count Number Of Vowels And Consonants

[desy321]

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.

1. <form
   
   >
   
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.

Download