Write A Word Counter Form UI To Count Words Using Javascript

By -
Javascript UI counting total words

Here’s a fully working code written in HTML and JavaScript to work with counting numbers of how many words in one big article.

The user interface is written in HTML and jQuery JavaScript framework, this simple program works by pasting your words you want to count, and when clicking on the submit button, it will count all the total numbers of words.

Bonus additional feature for clearing the input text area, which you can do manually by selecting all the text and press delete.

The Code

Explanation of the code

<texatea>

To create an HTML form with one single text area field input, to type or copy pasting the words that you want to count.

<button type="submit">

Create a button for handling a submit of a form, or a click when you finish inputting the sentences.

<button type="button" id="clear">

The last button is a clear button when it’s clicked it will empty the area that you input on it. The button has an ID clear and the type of this button is "button" not "submit", so when you click on it, it will not submit the form.

<script>...</script>

A set of JavaScript codes using jQuery to handle when a user submit the form by clicking the submit button, and clear button.

function countWords(str)

We create a function countWords that can be used to process the parameter str, and using Regular expression inside the function to parse the words by spaces and count all the many words that have in it.

str.trim().split(/\s+/)

We use the trim function to remove extra whitespace at the beginning and ending of the sentences, from the parameter str. Then split using Regular expression to split sentences by whitespace.

/s+

The /s+ is a regular expression that will match any whitespaces (whitespaces are: the space, and any other non-printable characters).

str.length

With the split function we now have chunks of arrays of words that we can then use to determine the length of an array, which in this case is the total number of words in sentences.

$('form').on('submit', function(e){...}

This is the block of jQuery code that will handle whenever a user submits a form in a web page, in this case the user will click on the button with type submit.

$('#clear').on('click', function(e){

Now this block is another jQuery code that will handle a button with an ID clear. 

event.preventDefault()

What is event.preventDefault() is to prevent the browser from refreshing the page, tell the browser to not refresh the page when a form is submitted.

var words = $('textarea').val();

Store the value in the text area into variable words.

var total = countWords(words);

Using function countWords we define earlier to store the number of the word on a variable total.

$('#total').text(total);

We set a HTML tag content with an ID total with the variable total in the previous line.

$('textarea').val("");

This line is to clear out or set the HTML Textarea with an empty value.

Counting Word Demo

You can visit the demo of this JavasScript to count words.

 

Next thing to do

In the next feature I’ll try to add two more button undo and redo, which seems to be not very hard to implement but I don’t have time for now to develop that feature.

I love writing UI with JavaScript and jQuery, it’s such a pleasure to do HTML document manipulation with a simple and easy to understand syntax.

Even though the future may not be good for jQuery, because it’s capable only of doing small projects, but when projects get bigger, it’s getting harder to maintain the code. I have experienced it myself, but for small projects like this, it is much faster using JavaScript and jQuery.


I am an experiences web developer, have a good problem-solving and deep understanding of software development principles. With comprehensive skill set in Java, PHP, Python, C and JavaScript. Able to do database thing like MySQL and Oracle. Along with expertise in frameworks like Spring, React, and Firebase. Have a solid understanding of software development methodologies, like Agile and Scrum. I applies best practices to ensure the development process is efficient and of the highest quality output.

Popular posts from this blog

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

By -
Image
Microservice Spring with Apache Kafka Kafka is an asynchronous messaging queuing system, but when you have a case in your project that you need to have the result immediately from another service you can do that quite easily. Kafka from the client side produces a message to the server side, then waiting for the server to return back the message exactly what the client wants. It’s identified in the kafka header request named KafkaHeaders.CORRELATION_ID and a topic where the server should send. If the server side produces the same correlation id to the same topic in the request, then the client side will catch that message as its reply. Although you can work with kafka from a different framework and language other than Java and Spring. Here’s in this example i just specifically giving the example of sending and replying kafka messages using Spring Boot. The Project Overview The client-project will send a string message to the server-project over kafka, then the server-project wil
Read more

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

By -
Image
MySQL and MariaDB password As already mentioned in the title of this blog, this error message sometimes occurred when we are trying to update our root password database, either MySQL or MariaDB, The error says: ERROR 1348 (HY000): Column 'Password' is not updatable This is because if we use this SQL command to update our database root password, and it turn out to be Restricted by MySQL to use update on mysql database. UPDATE mysql.user SET Password=PASSWORD('1234') WHERE User='root'; The solutions for MySQL Error1348 So you can not update a user password using Update commands, to update the password, use ALTER commands instead. like the following. ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; And then you need to do the flush privileges to commit previous queries (that alter command above) into the system, simply do like this. flush privileges; So now you have your root with password 1234. Although it is recommended to
Read more

How To Create Spring Boot Project Using Netbeans

By -
Image
Spring Boot is program that you can use to develops Spring Framework easier, without the need of using so many hard to handle configuration. This tutorial, we are gonna create Spring Boot Application by using Netbeans IDE. You can of course create Spring Boot Appilcation on Netbeans, but it will be easier if just using plugin for Spring development in Netbeans, 1. Open Netbeans, click tools menu and click plugin. After plugin window opened, click tab Available Plugins and find the "Nb SpringBoot" plugin then install and activate the plugin. 2. After restarting the Netbeans IDE. Now you gonna be able to create a new project with Spring boot application. File > New Project > Under categories, choose Maven > then choose  Spring Boot Basic. Now you can start the development of spring boot application using your Netbeans IDE. Open pom.xml to add spring boot dependencies you want.
Read more

How To Connect SSH Using PEM Certificate On Windows

By -
Image
Usually you will need a pair of SSH username and password to connect to a remote server. But there's also another way to connect to the server via SSH but without password, just using a dot pem (example.pem) file. Here's how we usually do on Windows 1. Let’s SSH login using pem to confirm if it’s throwing error or the pem is fine, if error then we need to move to step 2 to fix it: ssh adam@10.0.0.123  -i server-cert.pem And here's the usual error that will throw if your pem file is not ready for SSH login. You need to follow the next step to make your pem certificate ready to login to your server via SSH. 2. Open Windows Explorer, then right-click on the pem file, then select "Properties". Navigate to the "Security" tab, and click "Advanced" 3. Disable inheritance 4. Delete all permissions, so it doesn’t have any permission 5. Now add you as the only only owner. By click button Add and then Select a principal, then Advanced. 6. On the showing p
Read more

Upload and Download Rest API using Spring Boot Reactive WebFlux

By -
Image
Reactive Spring Logo This is maybe a very simple task, but for those of you that may not be familiar with WebFlux found it difficult to create a Rest API that handles upload and download in Reactive spring application. Create the skeleton Spring project Create a new project, go to start.spring.io , on the dependencies section, add Spring Reactive Web. Generate and extract it into your desired project location. Instead of using spring-boot-starter-web, use spring-boot-starter-webflux instead in your pom.xml. Here’s the pom.xml for our Reactive Rest API project. Create our Rest controller Now that you have set to use WebFlux instead of the usual web, we have to change a little bit in the Controller class that handles the API endpoints. It doesn’t change much but you have to wrap the Response in Mono and the request parameter to FilePart. So our upload and download file controller will look like this. Create utility to handle file upload We need to structure our project better, so we cr
Read more