Javascript Vowel Counter

Javascript Vowel Counter

Methods Used

The following are some of the TAGS used in the HTML aspect of the coding, Figure 1.0:

  • H2
  • DIV


Figure 1.2 shows the function that is called when the ‘Find Vowels’ button is clicked. This function makes use of the following data types and logics:

  • Local variables
    • They can only be accessed within the function. Eg: var largestFound = 0;
  • Arrays
    • An array is a special variable, which can hold more than one value at a time. Eg:  var vowels = ["a", "e", "i","o","u"];
  • DOM Methods & Properties
    • getElementById
    • innerHTML
  • Function Declarations
    • “Declared functions are not executed immediately. They are “saved for later use”, and will be executed later when they are invoked (called upon)”, (, n.d).  Eg: function analyze(){ ‘code content’; }
  • Function Expressions
    • A function expression can be stored in a variable. Eg:  var percentage_value = percentage(value,total);
  • Methods
    • Replace
    • toFixed
    • toLowerCase
  • For Loop
    • loops through a block of code a number of times: Eg:  for (var i in vowels){ ‘code content’;}

JAVASCRIPT document link <script src="js/script.js" type="text/javascript"></script>, this is an externally linked file. This document contains comments on all aspects of the code and algorithm.

To make the application more robust and correct I ensure to employ some native methods for cleaning the data before checks are run against it by use of ‘.replace’. This snippet ensures that all 3 types of line breaks and spaces are removed from the content entered by the user, see line 15-16 in Figure 1.2.

A word count meter was also used to indicate to the user the amount of text type as well as a validation system for activating the ‘Find Vowel’ button that is disabled by default and if the text entered is less than 10.

Upon clicking the  ‘Find Vowel’ button the system analyzes the content typed, identifies all vowels found as well as the most found(highlighted in yellow). A function was also created to print the percentage of each vowel found as well as total vowel percentage with typed content.


Figure 1.3, shows the different tags, attributes, and values used in the HTML DOCUMENT.

H2 tag is used for the ‘Welcome to Vowel Checker 2016’ string, which is the application a title and header.

The selector button, button:hover and button:disabled were used to configure the look and feel of the button default when the mouse hovers and when the button is disabled respectively. The textarea, on the other hand, was a bit more complex to setup.

CSS document link <link href="css/style.css" rel="stylesheet" type="text/css"/>, this is an externally linked file.


The first thought was to use the TEXTAREA selector to configure the setting and attributes, but what I found out was that configurations such a resize and the margin could use this default selector; however it would require an ID to add the styling attributes and values. Also within JAVASCRIPT checking for the occurrence of the vowels within a string is case sensitive thus I have to convert everything to lower before doing the analysis. This, in turn, increases the accuracy of the algorithm.

Figure 1.0 Illustrating HTML Code and Web App

Screen Shot 2016-06-18 at 10.40.11 AM.png

Figure 1.1 Illustrating Web Application sample run

Screen Shot 2016-06-18 at 10.44.48 AM.png

Figure 1.2 Illustrating JAVASCRIPT Coding

Screen Shot 2016-06-18 at 10.40.43 AM.png

Figure 1.3 Illustrating CSS Coding

Screen Shot 2016-06-18 at 10.40.59 AM.png

Reference: (n.d) JavaScript Tutorial, Available at: (Accessed: June 18, 2016).

Source Code

Leave a Reply

Your email address will not be published. Required fields are marked *

Groope Multimedia © 2019, All rights reserved