1. Tutorials
  2. JavaScript Tutorial
  3. Creating a Word Counter App in JavaScript Tutorial

Creating a Word Counter App in JavaScript Tutorial

Submitted by oretnom23 on Friday, February 25, 2022 - 10:34.

In this tutorial, I will show how to create a simple Word Counter App using HTML and JavaScript. The main goal of this tutorial is to give you ideas or techniques how to manipulate html content text and more. This web application idea or techniques can be useful for your future web application projects such as Content Management Systems also known as CMS. The application only uses pure JavaScript codes in acheiving the main features.

The scripts are written in:

User Interface:
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Main Function Scripts:
- JavaScript
UI Framework/Library:
- Bootstrap version 5

About the Word Counter App

The Word Counter App that we will be creating in this tutorial contains a single page that has a text field or text area where the user can input their phrases or content to count. The application will automatically count the number of words, characters, characters without spaces, and paragraphs. The count will automatically initiate or be triggered when the user inputs or enters something on the text field.

Let's do the coding...

Getting Started

In this tutorial script I will be using Bootstrap version 5 a CSS Framework for the user interface design. Kindly download it also in your end.

My source code directory:

  • source_code_root_path (./)
    • css (./css)
      • bootstrap.min.css
    • js (.js)
      • bootstrap.min.js

Creating the User Interface

Now, we will be creating our index file which contains the HTML Scripts of the application. This contain the text fields and the count container elements. Open your favorite text editor such as notepad++ or sublime text. Create a new file naming index.html . Copy the script below and paste it ino the index file. Then save the file in your source code root directory.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title> Simple Word Counter App</title>
  9.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  10.     <link rel="stylesheet" href="./css/styles.css">
  11.     <script src="./js/bootstrap.min.js"></script>
  12.     <script src="./js/script.js"></script>
  13.  
  14.     <style>
  15.  
  16.     </style>
  17. </head>
  18.  
  19. <body class="bg-dark bg-gradient text-light">
  20.     <main>
  21.         <div class="col-lg-12">
  22.             <h1 class="fw-bolder text-center" id="project-title">Simple Word Counter App in JavaScript</h1>
  23.         </div>
  24.         <div class="clear-fix my-5"></div>
  25.         <div class="container w-100">
  26.             <div class="card rounded-0 shadow text-dark">
  27.                 <div class="card-body">
  28.                     <div class="col-lg-12">
  29.                         <div class="row justify-content-center">
  30.                             <div class="col-lg-7 col-md-10 col-sm-12 col-sm 12">
  31.                                 <!-- Count Elements -->
  32.                                 <div class="row align-items-center">
  33.                                     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 px-3">
  34.                                         <large class="fw-bolder"><span class="text-muted">Total Characters:</span> <span id="total-characters">0</span></large>
  35.                                     </div>
  36.                                     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 px-3">
  37.                                         <large class="fw-bolder"><span class="text-muted">Total Characters <small>(no-spaces)</small>:</span> <span id="total-characters-ns">0</span></large>
  38.                                     </div>
  39.                                     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 px-3">
  40.                                         <large class="fw-bolder"><span class="text-muted">Total Words:</span> <span id="total-words">0</span></large>
  41.                                     </div>
  42.                                     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 px-3">
  43.                                         <large class="fw-bolder"><span class="text-muted">Total Paragraphs:</span> <span id="total-paragraphs">0</span></large>
  44.                                     </div>
  45.                                 </div>
  46.                                 <!-- End of Count Elements -->
  47.  
  48.                                 <div class="card rounded-0 shadow">
  49.                                     <div class="card-body">
  50.                                         <!-- Text Field Element -->
  51.                                         <textarea id="text-field" rows="15" autofocus class="form-control form-control-sm rounded-0" placeholder="Write something here..."></textarea>
  52.                                         <!-- End of Text Field Element -->
  53.                                     </div>
  54.                                 </div>
  55.                             </div>
  56.                         </div>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </main>
  62. </body>
  63.  
  64. </html>

Creating the Custom CSS

Next, add a new file naming styles.css. This file contains the script for some additional custom styles for out application interface. In my case, this file is located inside the css directory in my source code folder. This file is included in the index file as you can see it on the line 10 of the index.html file.

  1. html,
  2. body {
  3.     min-height: 100%;
  4.     width: 100%;
  5. }
  6.  
  7. main {
  8.     display: block;
  9.     min-height: 100%;
  10.     overflow: auto;
  11.     padding: 1em 0;
  12. }
  13.  
  14. main * {
  15.     font-family: Comic Sans MS;
  16. }
  17.  
  18. #project-title {
  19.     text-shadow: 3px 3px 7px #000;
  20.     padding: 2.5em 1em !important;
  21. }

Creating the Main Scripts

Lastly, we will creating the JavaScript File that contains the main scripts of the feature of the application. The scripts includes an eventListener scripts and DOM Manipulations. Save this file as script.js. In my case, this file is located inside the js directory of my source code folder. This file is included in the index file as you can see it on the line 12 of the index.html file.

  1. // Initiate the script below on page window is succesffuly loaded
  2. window.addEventListener("load", () => {
  3.     (function() {
  4.  
  5.         // Initiating the count on text field input state
  6.         document.getElementById('text-field').addEventListener("input", function(e) {
  7.             // Text Field Value
  8.             var text = document.getElementById('text-field').value
  9.                 // Count Variables
  10.             var total_chars = 0;
  11.             var total_chars_ns = 0;
  12.             var total_words = 0;
  13.             var total_paragraphs = 0;
  14.  
  15.             // Removing the spaces for counting the characters without the spaces
  16.             var chars = text.replace(/\s/gi, '')
  17.  
  18.             //Splitting the words using the spaces as the delimiter
  19.             var words = (text.trim()).split(/\s/gi)
  20.  
  21.             //Splitting the words using the next line as the delimiter
  22.             var paragraphs = (text.trim()).split(/[\n\r]+/gi)
  23.  
  24.             // removing the empty strings in the word array
  25.             Object.keys(words).map(k => {
  26.                 if (words[k].trim() == "") {
  27.                     delete words[k];
  28.                 }
  29.             })
  30.             words = words.filter((v) => {
  31.                 return v.length > 0;
  32.             })
  33.  
  34.             // Setting the count values
  35.             total_chars = text.length
  36.             total_chars_ns = chars.length
  37.             total_words = words.length
  38.             total_paragraphs = paragraphs.length
  39.  
  40.             // Updating the count containers text content
  41.             document.getElementById('total-characters').innerText = parseFloat(total_chars).toLocaleString('en-US')
  42.             document.getElementById('total-characters-ns').innerText = parseFloat(total_chars_ns).toLocaleString('en-US')
  43.             document.getElementById('total-words').innerText = parseFloat(total_words).toLocaleString('en-US')
  44.             document.getElementById('total-paragraphs').innerText = parseFloat(total_paragraphs).toLocaleString('en-US')
  45.         })
  46.     })();
  47. })

That's it. You can now test the application on your end by browsing the index.file in your prefered browser. To know if the application is properly working, check the count containers above the text field. The count containers must update automatically every time you enter or input something on the text field.

DEMO VIDEO

That is the end of this tutorial. If there's an error occurred on your end. You can download the working source code that I created for this tutorial. The download button is located below this article. I hope this will help you with what you are looking for and you'll find something useful for your future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Enjoy :)

Tags
Javascript
Javascript Tutorial for Beginners
JavaScript Practice Code
Word Counter App Project Source Code
JavaScript Tutorial for DOM Manipulation
JS DOM Manipulation Tutorial
HTML
css
js

Add new comment

About text formats
  • 401 views