A Basic Word Frequency Counter using Javascript

Published on 04 May 2021. Written by Vaibhav Kumar

Got a long comprehension to read or saw a long written work which bored you. Want to play with words. Like counting different words in it and telling the frequency of each word and that too in a systematic way, then you are reading the perfect project for it.

Here is the web development project with UI plus backend calculation using ajax technique of Java Script inclusion:-

Read more..

SLNOTE
OUTLINE:

A simple web page requires HTML designed with CSS and some backend work with languages like Javascript. This leads to 3 files in a web application, but here two .js files will be used. A word frequency counter can be used in many ways and shown in graphical, bubble or table form. We will be making table one. I will provide hints/ways to do others.

PREREQUISITE:

1. Hold on HTML and CSS (design your UI and structure in your own way)
2. A basic understanding of javascript
3. For getting exciting colours for your project you can visit the site of COLOR CLAIM

SLLATEST
REQUIREMENTS:

Hardware:

• One Laptop or Desktop with any OS (Linux/Windows/iOS)

Software/Technology:

• A Browser ( Chrome/Firefox/Opera/Safari/IE) to run the program. I prefer chrome or firefox as it provides a console to see behind the work of program like like the IDE of python ( to use just right-click on mouse and select ‘Inspect’ or Ctrl+Shift+I to open it and switch to console tag in this window)
• A text editor ( Visual Studio(VS) Code/Atom/Sublime/Notepad ) to code. I prefer VS code as it completes the code from its libraries and themes are attractive.
• Internet Connection

IMPLEMENTATION:

The whole project is basically in 3 phase as per language used:

1) HTML ( create the skeleton of the application )

2) CSS ( UI/ styling of the application )

3) JavaScript ( Calculation and backend work of the application )

HTML File ( index.html )

• Simply create the structure of head and body, add a title to head tag area and give the link to CSS file to be used using the link tag
• In head tag, we include a link to the CSS file
• we also add a jquery library- which can be added using a script tag from the file where the library is downloaded.
• Note: you can get a direct link from google with the latest version
• In the body tag area, we need only one division to create a container for words or sentences to be pasted to count and calculate the frequency of words.In the same division, we add a button saying “count the words” which triggers the function of javascript. At the very end of the body tag area app, the link to the javascript file using javascript tag. Now if you want you can use footer tag to give a tagline to say “created by” 
• Here we will use two times script tag to add the other javascript file.First for additional.js and next line for table.js.End with HTML tag closure and HTML file is ready. There is also a table to be created which will be created by javascript itself

CSS File ( style.css)

We create variables to be used in styling the page using root in the following way:

: root {

--color-main: #f9f7e8;

--color-text: #333;

--color-accent: #61bfad;

--color-dark: #ddd;

--width-max: 30rem;

}

• Now instead of typing code, we just need to use the variable
• Now we will style each tag separately for font, size, box-sizing, background, etc.
• We can use the hover attribute of the button to style it differently
• Using class styling we can create edge styling of the box, button, table to be created

Note:- the table since not in HTML cannot be styled through class or id so directly modify by tags like table, tr, td which will be used in javascript

JavaScript

We will be using JavaScript files with jquery library (the functions used are not enough to form the table):

table.js

Create a function which is activated by a button click and calls process data constant

Process data use various functions to process data which include- get input, clean input to remove various symbols, word frequency to find the frequency of words, sort data to sort the result.

The result is stored in one variable and now this is used to create a table connected to an empty id of div table in CSS file joined to html page using inner HTML extension the table is created using add table where 3 variables are passed divFreq, headerFreq, sortedFreq these are defined in starting of javascript in following way:

const divFreq = "div-table";

const headersFreq = ["Rank", "Count", "Word"];

const dataFreq = [[1, 52, "words"], [2, 50, "dog"]];

I am providing the code for header and rows as it is better than explaining

//TABLE Headers

const tr = document.createElement("tr");

table.appendChild(tr);

headers.forEach(currentValue => {

const th = document.createElement("th");

th.appendChild(document.createTextNode(currentValue));

tr.appendChild(th);

});

//TABLE ROWS

data.forEach(currentValue => {

const tr = document.createElement("tr");

currentValue.forEach(currentValue => {

const td = document.createElement("td");

td.appendChild(document.createTextNode(currentValue));

tr.appendChild(td);

});

table.appendChild(tr);

});

myTableDiv.appendChild(table);

Note: this is only code for the header row, rest things are to be created by yourself 

Keep everything in one file – images and the files and the project is ready to be used. It can be used locally but if you want you can upload it online. For more information, you can check the following link - https://github.com/vaibhavkumar-779/word-frequency-counter

SLDYK
Kit required to develop A Basic Word Frequency Counter using Javascript:

• HTML
• CSS

Technologies you will learn by working on A Basic Word Frequency Counter using Javascript:

• Web Development

Any Questions?