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/
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.
Let’s keep the project structure very simple. Only three files in total:
- index.html – this files hold HTML5 code
- style.css – Cascading Style Sheet
Application page starts with a simple H1 header and my name as an author:
As required, our application includes a <textarea> that allows the user to type a phrase.
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.
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.
Text result of either a pass success or error message for validation is being fed into HTML, captured in:
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
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.
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.
Following is the button code in HTML. Clicking on the button calls the principal function: countVowels().
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
Following the precedence set by initial fieldset, also these two are following the same structure:
Count Vowels is a primary and most important function of the program. It executes in following steps:
- Gets text from textarea and converts it to lowercase:
- Validates the input text for length, by calling validation function (previously explained):
- If input is validated, counters are initialized and vowels are counted using a for loop:
- 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
- Once sorting is done, I print the results for all 3 result boxes:
- 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.
It either hides or shows all fieldsets under the name “resultGroup”. Following flowchart explains the function:
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.