HTML5 for Beginners – Count the Vowels using JavaScript

This article is the sixth post in the series that introduces HTML5 and JavaScript to beginners.  In this article, we’ll create an HTML5 application that allows the user to enter a text as an input and then by pressing the button we’ll provide a count of all vowels that user has typed in. 

 

Contents

 

Application Code 1

1. Online Plunker Demo 1

Final Product 2

Project Structure 3

Functionality 3

1. Header 3

2. Text Entry 3

3. Submit (‘Count Vowels’) Button 7

4. Results Boxes 8

5. countVowels() Function 10

6. showHideResults() Function 13

7. CSS styling 14

Lessons Learned 14

References 14

Application Code

Online Plunker Demo

I’ve created a running code using IDE and using Plunker. Thus, if you prefer working with interactive online console, you can see the code of here: https://embed.plnkr.co/9o12fWILFlKMTWMcZXBn/

Final Product

The Following is a screenshot of the final product. As you can see, the project includes a lot more functionality than we were asked to implement. In below sections of this document, I’ll explain all functions of this web-based application.

C:\Users\jaros\AppData\Local\Temp\SNAGHTMLac0b3d5.PNG

Project Structure

Let’s keep the project structure very simple. Only three files in total:

  • index.html – this files hold HTML5 code
  • script.js – JavaScript code
  • style.css – Cascading Style Sheet

Functionality

Header

Application page starts with a simple H1 header and my name as an author:

Preview:

Code:

Text Entry

As required, our application includes a <textarea> that allows the user to type a phrase.

Preview:

I’ve implemented this with a simple HTML code. As you can see, <textarea> is using a text placeholder, so the user knows where to type. It’s also nicely wrapped in a <fieldset>, so the whole area is an aesthetically pleasing.

JavaScript Code:

There are two additional functions that I’ve decided to implement when it comes to text entry.

Those are following:

  • Text Length Validation
  • Random Text Generator

2.1 Text Length Validation

If user types in less than minimum required ten characters, the application will greet the user with red validation message.

Preview:

It not only tells the user that they’ve only entered the required ten characters, but it also tells them how many characters out of 10 were typed and how many are left to type. This was done using JavaScript, by getting the text from textarea and checking its length, as follows.

JavaScript Code:

Text result of either a pass success or error message for validation is being fed into HTML, captured in:

HTML Code:

Here is a flowchart for the validation function:

As you can see, the code continues, if the minimum requirement for the length was met (by returning true) and printing an appropriate success message. This part of printing green success message would normally be left out, but I wanted to demo the functionality. It also provides a total number of characters entered, which is additional functionality I coded in.

This is what the success (green) message looks like:

2.2 Random Text Generator

Preview:

To go beyond what this project is asked for, I’ve also implemented a new button, situated in a left bottom corner. It allows the user to generate a random text.

To this extent, I’ve created JavaScript function that places the random text into the textarea. The function makes sure that the minimum 10 or more characters in the textarea requirement is always met and allows for easy testing of the application’s functionality.

JavaScript Code:

This is the flow chart for the random text generator:

As you can see, it’s simple. Function randomly selects the characters from a string that contains entire lower case alphabet. The interesting part of the random generator is, that it doesn’t generate present length for the string, it generates strings of random length between 10 and 100 characters long.

Submit (‘Count Vowels’) Button

Submit button’s only functionality is to call a JavaScript function, which is created specifically for the sole purpose of counting vowels. This JavaScript is named: countVowels() and it’s a primary function of the program, that calls rest of the functions required by the applications. Following is where the button resides on the screen:

Preview:

HTML Code:

Following is the button code in HTML. Clicking on the button calls the principal function: countVowels().

Results Boxes

Once the textarea (the submitted text) is validated for length, we needed to create a JavaScript function that read the input text and count the occurrence of each of the following English vowels: A, E, I, O, U. To do so, I went with the requirement and created five output boxes. I’ve added additional styling to the script. It shows all positive values higher than 0 in green color, all zero values in red color. Additionally, the highest occurring vowel is set with a yellow background:

Preview:

C:\Users\jaros\AppData\Local\Temp\SNAGHTMLac172b0.PNG

HTML Code:

I’ve used the following HTML code to draw these boxes:

HTML code comprises of 5 input text fields wrapped in the fieldset, each including its own label. Each of the input fields has its own id, so I can later call it with the results of the count.

To gain some points for this exercise, I’ve also implemented two additional result boxes, right below:

  • One that counts the total number of all vowels
  • Another one that gives output as the sorted list of all vowels by their occurrence in descending order

Preview:

C:\Users\jaros\AppData\Local\Temp\SNAGHTMLac2da01.PNG

HTML Code:

Following the precedence set by initial fieldset, also these two are following the same structure:

countVowels() Function

Count Vowels is a primary and most important function of the program. It executes in following steps:

  1. Gets text from textarea and converts it to lowercase:

  1. Validates the input text for length, by calling validation function (previously explained):

  1. If input is validated, counters are initialized and vowels are counted using a for loop:

  1. I also get total number of vowels for the result box that counts total of all vowel occurrences:
  2. Then I put all counters into a two-dimensional array and sort them. Two-dimensional for the reasons that I need to know which letter was occurring the most, sorting it this way gives me the answers as it sorts both columns

  1. Once sorting is done, I print the results for all 3 result boxes:

  1. I finish the function with highlighting the most occurring vowel input text field with yellow color.

Additionally, I also create a pointer (“<< Highest Count!”), that points to a field, making it a more visible to user:

The main Function’s Flowchart

To better illustrate inner workings of the countVowels function, I’ve decided to create the following flowchart that explains the behavior of the entire program and all its decisions.

showHideResults() Function

I’ve created one more function to hide all of the results boxes, in case the validation function doesn’t pass. This is contained in following JavaScript code:

It either hides or shows all fieldsets under the name “resultGroup”. Following flowchart explains the function:

CSS styling

As far as CSS styling, it is kept to an absolute minimum. I only set the width of text area, changed the font size and bolded input and legend headings. And also floated ‘generate text’ button to right, so it’s aesthetically more pleasing.

Lessons Learned

We’ve learned how easily we can create a small and concise HTML5 application from scratch just by using handful of HTML tags and a simple JavaScript code. We’ve used the best practices for validating the input and printing results. Application functions as per the requirements, hopefully you’ve learned something new today.

References

Powell, T., Schneider, F. and Maragioglio, N., 2004. JavaScript: The complete reference. McGraw-Hill, Inc. (Accessed: 26 November 2016).

Flanagan, D., 2006. JavaScript: the definitive guide. ” O’Reilly Media, Inc.” (Accessed: 27 November 2016).

Crockford, D., 2008. JavaScript: The Good Parts: The Good Parts. ” O’Reilly Media, Inc.”. (Accessed: 28 November 2016).

Purcell, L., Mara, M.J. and Boles, D., 1996. The ABCs of JavaScript. SYBEX Inc. (Accessed: 29 November 2016).

Haverbeke, M., 2014. Eloquent JavaScript: A Modern Introduction to Programming. No Starch Press. (Accessed: 29 November 2016).

Javascript: Sort multidimensional array (2016) Available at: http://stackoverflow.com/questions/6993302/javascript-sort-multidimensional-array (Accessed: 29 November 2016).

(Visited 29 times in last 30 days)

Comments

comments