Web Development

A Basic Word Frequency Counter using Javascript

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..

A Basic Word Frequency Counter using Javascript project Looking to build projects on Web Development?:

Web Development Kit will be shipped to you and you can learn and build using tutorials. You can start for free today!

1. Web Development with PHP and MySQL

2. Front End Web Development with React JS

3. Back End Web Development with Node JS

4. Full Stack Developer

5. Web Development (Career Building Course)


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

Latest projects on Web Development

Want to develop practical skills on Web Development? Checkout our latest projects and start learning for free


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


How to build Web Development projects Did you know

Skyfi Labs helps students learn practical skills by building real-world projects.

You can enrol with friends and receive kits at your doorstep

You can learn from experts, build working projects, showcase skills to the world and grab the best jobs.
Get started today!


Kit required to develop A Basic Word Frequency Counter using Javascript:
Technologies you will learn by working on A Basic Word Frequency Counter using Javascript:
A Basic Word Frequency Counter using Javascript
Skyfi Labs Last Updated: 2021-05-04





Join 250,000+ students from 36+ countries & develop practical skills by building projects

Get kits shipped in 24 hours. Build using online tutorials.

More Project Ideas on web-development

Web Development with PHP and MySQL
Creating a website using WordPress
Weather tracing application using pure java script
Webpage including form
E-commerce Website development using WordPress
Augmented Reality Web Browser using Unity
Creating a website with Bootstrap studio
SEO friendly website (web development project)
Parallax website (web development project)
A Basic Word Frequency Counter using Javascript
Creating a Login register form - Web development project
Making a review section on a web page without AJAX
NGO Activity portal project
Restaurant Website - Web development project
Payment Checkout Page Design with HTML and CSS
Designing a Calculator with HTML, CSS, JavaScript
Web Scraping Backend Web Development project using Node Js
Entertainment Web app - Front end Web Development project using react js
ToDo Web app using Django
Word Counter using HTML, CSS and Javascript
Design A Multi-page Responsive Website
How to create a search table for a website
How to create a feedback form and receive an email
How to create a website with HTML and CSS
Basic one page blog full stack web development project
Web-based chat application with webcam using PHP
Simple website using Bootstrap
How to Develop ATM Interface using JAVA?
How to create a Custom Icon? - Web development project
Build a To-Do list with JavaScript
Bulk SMS and Mail Sender project
MIS Portal for academics
How to create a product landing page?
Personal Portfolio Website Design using HTML, CSS, and JavaScript

Subscribe to receive more project ideas

Stay up-to-date and build projects on latest technologies