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:-
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
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:
Want to develop practical skills on Web Development? Checkout our latest projects and start learning for free
REQUIREMENTS:
Hardware:
Software/Technology:
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 )
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;
}
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
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!
Join 250,000+ students from 36+ countries & develop practical skills by building projects
Get kits shipped in 24 hours. Build using online tutorials.
Stay up-to-date and build projects on latest technologies