Live Word Counter Application using Pure JavaScript Source Code Free Download

[b10qu34d0]

This simple project is entitled Live Word Counter Application. It is a web-based application that counts the number of words, characters, and paragraphs of text content. This project was mainly developed using Pure JavaScript. It has a simple, pleasant, and mobile-responsive user interface using a Custom Stylesheet script. This project easy-to-use and automatically counts the text content words, characters, and paragraphs without reloading or refreshing the page.

How does the Live Word Counter Application work?

The Live Word Counter Application is a straightforward application that is counting the entered text content words, characters, and paragraphs as the primary purpose. The application allows the user to enter the text content they wanted to count and the count data will be updated automatically while the user inputs to the provided text field. This simple project is mobile responsive which resizes and updates the page payout when the window has changed or in smaller screen devices such as smartphones.

Features

This Live Word Counter contains the following features:

• Counts the number of words
  
• Counts the number of Characters
  
• Counts the number of paragraphs
  
• Live Updating the Count Panel or text block
  

Technologies

This simple project was developed using the following technologies:

• VS Code Editor
  
• HTML
  
• CSS
  
• JavaScript
  
• Google Fonts
  

How does the project count the text content?

The entered text content words, characters, and paragraphs are being counted using the built-in methods, API, and functions. Check out the script below.

1. //Text Content Field
   
2. const
   
   textField =
   
   document.getElementById
   
   (
   
   'contentField'
   
   )
   
3. //Total Words Count Text Block
   
4. const
   
   wordsCountField =
   
   document.getElementById
   
   (
   
   'words_count'
   
   )
   
5. //Total Characters Count Text Block
   
6. const
   
   charactersCountField =
   
   document.getElementById
   
   (
   
   'characters_count'
   
   )
   
7. //Total Paragraphs Count Text Block
   
8. const
   
   paragraphsCountField =
   
   document.getElementById
   
   (
   
   'paragraphs_count'
   
   )
   
9. 
   
10. textField.addEventListener
    
    (
    
    'input'
    
    ,
    
    (
    
    )
    
    =>
    
    {
    
11. var
    
    _content =
    
    textField.value
    
12. if
    
    (
    
    _content ==
    
    ''
    
    )
    
    {
    
13. var
    
    words =
    
    0
    
14. var
    
    chars =
    
    0
    
15. var
    
    paragraphs =
    
    0
    
16. }
    
    else
    
    {
    
17. var
    
    words =
    
    _content.split
    
    (
    
    /\s/
    
    )
    
    .length
    
18. var
    
    chars =
    
    (
    
    (
    
    _content)
    
    .replace
    
    (
    
    /\s/gi
    
    ,
    
    ''
    
    )
    
    )
    
    .split
    
    (
    
    ''
    
    )
    
    .length
    
19. var
    
    paragraphs =
    
    0
    
20. var
    
    paragraphs_split =
    
    _content.split
    
    (
    
    /\n/
    
    )
    
21. paragraphs_split.forEach
    
    (
    
    par =>
    
    {
    
22. if
    
    (
    
    par.trim
    
    (
    
    )
    
    !=
    
    ""
    
    )
    
    {
    
23. paragraphs++;
    
24. }
    
25. }
    
    )
    
26. }
    
27. 
    
28. 
    
29. wordsCountField.innerText
    
    =
    
    words.toLocaleString
    
    (
    
    'en-US'
    
    )
    
30. charactersCountField.innerText
    
    =
    
    chars.toLocaleString
    
    (
    
    'en-US'
    
    )
    
31. paragraphsCountField.innerText
    
    =
    
    paragraphs.toLocaleString
    
    (
    
    'en-US'
    
    )
    
32. }
    
    )
    

Snapshots

Here are some Snapshots of the Live Word Counter Application:

Page Layout (Big Screens)

Page Layout (Mobile or smaller screen)

Text Content Panel

Word Count Blocks Panel

The Live Word Counter Application's complete source code is available on this website and it is free to download. Feel free to download and modify the source code the way your desire to meet your own requirements. This project was mainly developed for educational purposes only.

How to Run?

1. Download the provided source code zip file. (download button is located below)
   
2. Extract the downloaded source code zip file.
   
3. Locate the index.html file in the extracted source code directory.
   
4. Browse the index file with your preferred browser.
   

DEMO VIDEO

That's it! I hope this Live Word Counter Application using Pure JavaScript Source Code will help you with what you are looking for and will be useful for your current and future web application projects.

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

Enjoy =)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download