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.

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 that allows the user to type a phrase.</p> <p><strong>Preview:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-51.png" alt=""></p> <p>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.</p> <p><strong>JavaScript Code:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-52.png" alt=""></p> <p>There are two additional functions that I’ve decided to implement when it comes to text entry.</p> <p>Those are following:</p> <pre><code>- Text Length Validation - Random Text Generator </code></pre> <h4>2.1 Text Length Validation</h4> <p>If user types in less than minimum required ten characters, the application will greet the user with red validation message.</p> <p><strong>Preview:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-53.png" alt=""></p> <p>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 <strong>textarea</strong> and checking its length, as follows.</p> <p><strong>JavaScript Code:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-54.png" alt=""></p> <p>Text result of either a pass success or error message for validation is being fed into HTML, captured in:</p> <p><strong>HTML Code:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-55.png" alt=""></p> <p>Here is a flowchart for the validation function:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-56.png" alt=""></p> <p>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.</p> <p>This is what the success (green) message looks like:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-57.png" alt=""></p> <h4><strong>2.2 Random Text Generator</strong></h4> <p><strong>Preview:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-58.png" alt=""></p> <p>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.</p> <p>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.</p> <p><strong>JavaScript Code:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-59.png" alt=""></p> <p>This is the flow chart for the random text generator:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-60.png" alt=""></p> <p>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.</p> <h3><strong>Submit (‘Count Vowels’) Button</strong></h3> <p>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: <strong>countVowels</strong>() 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:</p> <p><strong>Preview:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-61.png" alt=""></p> <p><strong>HTML Code:</strong></p> <p>Following is the button code in HTML. Clicking on the button calls the principal function: <strong>countVowels()</strong>.</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-62.png" alt=""></p> <h3><strong>Results Boxes</strong></h3> <p>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:</p> <p><strong>Preview:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/c-users-jaros-appdata-local-temp-snaghtmlac172b0-.png" alt="C:\Users\jaros\AppData\Local\Temp\SNAGHTMLac172b0.PNG"></p> <p><strong>HTML Code:</strong></p> <p>I’ve used the following HTML code to draw these boxes:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-63.png" alt=""></p> <p>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.</p> <p>To gain some points for this exercise, I’ve also implemented two additional result boxes, right below:</p> <pre><code>- 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 </code></pre> <p><strong>Preview:</strong></p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/c-users-jaros-appdata-local-temp-snaghtmlac2da01-.png" alt="C:\Users\jaros\AppData\Local\Temp\SNAGHTMLac2da01.PNG"></p> <p><strong>HTML Code:</strong></p> <p>Following the precedence set by initial fieldset, also these two are following the same structure:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-64.png" alt=""></p> <h3><strong>countVowels() Function</strong></h3> <p>Count Vowels is a primary and most important function of the program. It executes in following steps:</p> <pre><code>- Gets text from textarea and converts it to lowercase: </code></pre> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-65.png" alt=""></p> <pre><code>- Validates the input text for length, by calling validation function (previously explained): </code></pre> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-66.png" alt=""></p> <pre><code>- If input is validated, counters are initialized and vowels are counted using a for loop: </code></pre> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-67.png" alt=""></p> <pre><code>- I also get total number of vowels for the result box that counts total of all vowel occurrences:  - 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 </code></pre> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-69.png" alt=""></p> <pre><code>- Once sorting is done, I print the results for all 3 result boxes: </code></pre> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-70.png" alt=""></p> <pre><code>- I finish the function with highlighting the most occurring vowel input text field with yellow color. </code></pre> <p>Additionally, I also create a pointer (“<< Highest Count!”), that points to a field, making it a more visible to user:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-71.png" alt=""></p> <p><strong>The main Function’s Flowchart</strong></p> <p>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.</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-72.png" alt=""></p> <h3><strong>showHideResults() Function</strong></h3> <p>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:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-73.png" alt=""></p> <p>It either hides or shows all fieldsets under the name “resultGroup”. Following flowchart explains the function:</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-74.png" alt=""></p> <h3><strong>CSS styling</strong></h3> <p>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.</p> <p><img src="http://www.joe0.com/wp-content/uploads/2016/11/word-image-75.png" alt=""></p> <h2><strong>Lessons Learned</strong></h2> <p>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.</p> <h2><strong>References</strong></h2> <p>Powell, T., Schneider, F. and Maragioglio, N., 2004. JavaScript: The complete reference. McGraw-Hill, Inc. (Accessed: 26 November 2016).</p> <p>Flanagan, D., 2006. JavaScript: the definitive guide. " O'Reilly Media, Inc." (Accessed: 27 November 2016).</p> <p>Crockford, D., 2008. JavaScript: The Good Parts: The Good Parts. " O'Reilly Media, Inc.". (Accessed: 28 November 2016).</p> <p>Purcell, L., Mara, M.J. and Boles, D., 1996. The ABCs of JavaScript. SYBEX Inc. (Accessed: 29 November 2016).</p> <p>Haverbeke, M., 2014. Eloquent JavaScript: A Modern Introduction to Programming. No Starch Press. (Accessed: 29 November 2016).</p> <p>Javascript: Sort multidimensional array (2016) Available at: <a href="http://stackoverflow.com/questions/6993302/javascript-sort-multidimensional-array">http://stackoverflow.com/questions/6993302/javascript-sort-multidimensional-array</a> (Accessed: 29 November 2016).</p></section><footer class="blog-article-footer"><a class="blog-back-link" href="/">← Back to home page</a><a class="blog-category-link" href="/category/software-development/">More articles in "<!-- -->Software Development<!-- -->" →</a></footer></article></main><aside class="sidebar"><h3 class="sidebar-title">Categories</h3><ul class="categories-list"><li class="category-item"><a class="category-link" href="/category/artificial-intelligence/"><span>Artificial Intelligence</span><span class="category-count">(<!-- -->2<!-- -->)</span></a></li><li class="category-item"><a class="category-link" href="/category/cloud-big-data/"><span>Cloud & Big Data</span><span class="category-count">(<!-- -->64<!-- -->)</span></a></li><li class="category-item"><a class="category-link" href="/category/databases/"><span>Databases</span><span class="category-count">(<!-- -->26<!-- -->)</span></a></li><li class="category-item"><a class="category-link" href="/category/information-technology/"><span>Information Technology</span><span class="category-count">(<!-- -->45<!-- -->)</span></a></li><li class="category-item"><a class="category-link" href="/category/operating-systems/"><span>Operating Systems</span><span class="category-count">(<!-- -->86<!-- -->)</span></a></li><li class="category-item"><a class="category-link" href="/category/slovak-language-posts/"><span>Slovak Language Posts</span><span class="category-count">(<!-- -->50<!-- -->)</span></a></li><li class="category-item"><a class="category-link" href="/category/software-development/"><span>Software Development</span><span class="category-count">(<!-- -->114<!-- -->)</span></a></li><li class="category-item"><a class="category-link" href="/category/uncategorized-posts/"><span>Uncategorized Posts</span><span class="category-count">(<!-- -->68<!-- -->)</span></a></li></ul><div class="sidebar-section"><h3 class="sidebar-title">Search</h3><div style="position:relative"><div style="position:relative"><input type="text" placeholder="Search articles..." style="width:100%;padding:12px 40px 12px 12px;border:2px solid #ddd;border-radius:6px;font-size:0.9em;outline:none;transition:border-color 0.2s ease;box-sizing:border-box" value=""/><span style="position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#999;font-size:16px">🔍</span></div></div><div class="advanced-search-link"><a href="/search/">Advanced Search →</a></div></div><div class="sidebar-section"><h3 class="sidebar-title">Recent Posts</h3><div class="coming-soon">Feature coming soon...</div></div></aside></div><footer class="footer"><div class="footer-content"><p class="footer-copyright">© <!-- -->2025<!-- --> <!-- -->joe0.com<!-- --> • All rights reserved</p><p class="footer-credits">Built with Gatsby • Hosted on AWS Amplify</p></div></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/2016-11-29-html5-for-beginners-count-the-vowels-using-javascript/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" --> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-c32d83d1904f7c2d23d8.js\"],\"component---src-pages-about-js\":[\"/component---src-pages-about-js-36706b35965b35120dee.js\"],\"component---src-pages-categories-js\":[\"/component---src-pages-categories-js-38ead2c9908dcb760f09.js\"],\"component---src-pages-links-js\":[\"/component---src-pages-links-js-8184fb1b017a75a02596.js\"],\"component---src-pages-search-js\":[\"/component---src-pages-search-js-47693ee7f226cd600c98.js\"],\"component---src-templates-blog-index-js\":[\"/component---src-templates-blog-index-js-0b4521230c82430e9173.js\"],\"component---src-templates-blog-post-js\":[\"/component---src-templates-blog-post-js-7fb2ac598b7e9409ed82.js\"],\"component---src-templates-category-js\":[\"/component---src-templates-category-js-b4a9724f60128d1c5551.js\"]}"; </script> <script>window.___webpackCompilationHash="df5598ca06961cd1c99c";</script><script src="/webpack-runtime-bd1c14ff288e3a609650.js" async></script><script src="/framework-50643644876a507c7331.js" async></script><script src="/app-c32d83d1904f7c2d23d8.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>