A

MICROPROJECT REPORT
ON
“WORD COUNT USING HTML”

Submitted by –

Ms. Shaikh Naazmin Vasim

Ms. Kuldharan Shreya Narendra
Ms. Kuldharan Shruti Narendra
Mr. Pande Ruturaj Kiran

Guided by –
Prof. P. R. Ambre

DEPARTMENT OF COMPUTER ENGINEERING

ATES. FACULTY OF POLYTECHNIC, AKOLE.
2023-2024
 CERTIFICATE
This is certifying that,

Ms. Shaikh Naazmin

Vasim
Ms. Kuldharan Shruti Narendra
Ms. Kuldharan Shreya Narendra
Mr. Parmeshware Vishal Tulshiram
Mr. Pande Ruturaj Kiran

Has satisfactorily carried out and completed the project report entitled
“WORD COUNT USING HTML”
It is submitted in the partial fulfillment of the prescribed syllabus of subject
“CLIENT SIDE SCRIPTING LANGUAGE” [22519] a micro project for First
Year Diploma in Computer Engineering for the academic year 2023-2024.

Prof. P. R. Ambre Prof. S. B. Deshmukh

Project Guide and Subject Teacher Head of Department

Prof. R. D. Palhade
Principal
 ACKNOWLEDGEMENT

The satisfaction & the successful completion of any task would be incomplete
without the mention of people who made it possible because “Success is the
abstract of hard work & perseverance, but steadfast of all is encouragement
guidance”.

We have immense pleasure in expressing thanks to the Principal, Prof. R. D.

Palhade, for providing all the facilities for the successful completion of the
project.
We would like to express thanks to our HOD, Prof. S. B. Deshmukh Department
of Computer Engineering, who has guided us throughout the completion of this
project. With due respect, we thank our Guide Prof. P. R. Ambre, Department
of Computer Engineering, for his motivating support, keen interest which kept
our spirits alive although.
Finally, we would like to thank all the Teaching and Non-teaching staff and all our
friends who have rendered their support in the completion of this project report.
Thank You,
04
2. Introduction 05
3. Source
Code/Program 06
4. Output 15
5. Conclusion 17
6. References 18
INDEX
Sr No. Title Page
No.
1. Abstract 04
2. Introduction 05
3. Source
SR.NO TITLE
1. ABSTRACT
2. INTRODUCATION
3. SOURCE CODE/PROGRAM
4. OUTPUT
5. CONCLUSION
6. REFERENCE

Code/Program 06
4. Output 15
5. Conclusion 17
6. References 18
INDEX
Abstract
The Many times word
count needs to be done
between different projects.
In all these cases,
this type of JavaScript
Word Counter will help you
completely. In this tutorial,
you will learn
how to create Word
Counter JavaScript. A lot of
times we show character
limits or word
limits in different input
boxes. For example, in the
case of Twitter, there is a
character limit.
Although I have shared a
tutorial before where I
have shown how to create
a character limit
input box. This tutorial will
show you how to count
words and characters.
That means you
will see both a project
word and a character.Abstract
Abstract:
The Many times word count needs to be done between different projects. In all these
cases,
this type of JavaScript Word Counter will help you completely. In this tutorial, you will
learn
how to create Word Counter JavaScript. A lot of times we show character limits or
word
limits in different input boxes. For example, in the case of Twitter, there is a character
limit.
Although I have shared a tutorial before where I have shown how to create a character
limit
input box. This tutorial will show you how to count words and characters. That means
you
will see both a project word and a character.

 Extract the Abstract: Identify the section of the HTML that contains the abstract,
usually within specific tags like <abstract>, <p>, <div>, or others.

 Strip HTML Tags: Remove the HTML tags to get the plain text of the abstract.

 Count Words: Count the number of words in the plain text.

Introduction
Below is a preview that will
help you to know how this
Word Counter javascript
works.
Below you will find the
required source code. To
create this JavaScript Word
Counter
project I first created an
input box using HTML and
created a display. The
input box is
created using Textarea.
Then I designed using CSS.
After all, I have
implemented this project
(word counter HTML code)
with the help of JavaScript.
I used the background-
color blue of
a webpage. I made a box
on top of it. At the top of
the box is a display. This
display is
divided into two parts. In
the first part, you can see
the information of Word
Counter. In the
second part, the
information of the
character counter can be
seen. These values will
change
when I change something
in the input box. This
JavaScript Word Counter is
very easy to
make. I created it with
some amount of HTML and
some amount of CSS. A
little bit of
JavaScript has been used
to make this counter
project work.The
background of this input
area
is white and the text color
is black. A shadow has
been used around the box
to create a
beautiful banner that will
further highlight this Word
Counter in JavaScript on
the webpage.
Introduction:

Below is a preview that will help you to know how this Word Counter JavaScript
works. Below you will find the required source code. To create this JavaScript Word
Counter project, I first created an input box using HTML and created a display. The
input box is created using Textarea. Then I designed using CSS. After all, I have
implemented this project (word counter HTML code) with the help of JavaScript. I
used the background-color blue of a webpage. I made a box on top of it. At the top of
the box is a display. This display is divided into two parts. In the first part, you can see
the information of Word Counter. In the second part, the information of the character
counter can be seen. These values will change when I change something in the input
box. This JavaScript Word Counter is very easy to make. I created it with some amount
of HTML and some amount of CSS. A little bit of JavaScript has been used to make
this counter project work. The background of this input area is white and the text color
is black. A shadow has been used around the box to create a beautiful banner that will
further highlight this Word Counter in JavaScript on the webpage.
 04
2. Introduction 05
3. Source
Code/Program 06
4. Output 15
5. Conclusion 17
6. References 18
 Source Code/Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Word Length Calcuator</title>
</head>
<body>
<h1>Type a word in the box</h1>
<input type="text" id="str">
<div id="output"></div>
<button id="btn"><h2>Click to calculate word
length</h2></button>
<script src="app.js"></script>
</body>
</html>
body{
background-color:#f7240c;
text-align: center;
}
input{
margin: 100px auto 100px;
/* margin-left: 220px; */
width: 350px;
height: 40px;
display: block;
text-align: center;
}
#output{
margin-top: 45px;
width: 100px;
background: lightgreen;
margin: 100px auto 100px;
}
#btn{
width: 350px;
height: 80px;
color: #fff;
background-color:blue;
border-style: none;
border-radius: 15px;
margin-top: 100px;
/* margin-left: 385px; */
}
h1{
color: #000;
margin-top: 50px;
}
let button = document.getElementById('btn');
button.addEventListener('click', function(){
let word = document.getElementById('str').value;
let count = word.length;
let outputDiv = document.getElementById('output');
outputDiv.innerHTML = `<h1>${count}</h1>`
});
margin-top: 45px;
width: 100px;
background: lightgreen;
margin: 100px auto 100px;
}
#btn{
width: 350px;
height: 80px;
color: #fff;
background-color:blue;
border-style: none;
border-radius: 15px;
margin-top: 100px;
/* margin-left: 385px; */
}
h1{
color: #000;
margin-top: 50px;
}
let button = document.getElementById('btn');
button.addEventListener('click', function(){
let word = document.getElementById('str').value;
let count = word.length;
let outputDiv = document.getElementById('output');
outputDiv.innerHTML = `<h1>${count}</h1>`
});

Output
Inserting Value in
Output:-
Output:

Inserting Value in Output: -

Source Code/Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Word Length Calcuator</title>
</head>
<body>
<h1>Type a word in the box</h1>
<input type="text" id="str">
<div id="output"></div>
<button id="btn"><h2>Click to calculate word
length</h2></button>
<script src="app.js"></script>
</body>
</html>
body{
background-color:#f7240c;
text-align: center;
}
input{
margin: 100px auto 100px;
/* margin-left: 220px; */
width: 350px;
height: 40px;
display: block;
text-align: center;
}
#output{
RESULT:
Conclusion:

Word count. It’s a topic that receives a lot of coverage these days.
Bloggers and content marketers are always wondering what’s the ideal word count
to shoot for. Should every single piece be long form, or is it better to opt for shorter
pieces? It’s a valid question and something that I have researched extensively. The
purpose of this post is to shed light on just how long your blog articles should be.
There’s one thing I always want to make clear regarding word count. It only
matters if the content is good. Word count is not a standalone ranking factor. Word
count only has merit if the content quality is high! You can produce a 10,000-
wordarticle. But if the content and quality suck, then the article doesn’t deserve to
get ranked. You lose. Is word count important? Yes, it is, and that’s why I write
about it often. But word count is only important when coupled with super high
quality.
Conclusion
Word count.It’s a topic that receives a lot of coverage
these days.Bloggers and content
marketers are always wondering what’s the ideal word count to
shoot for.Should every single
piece be long form, or is it better to opt for shorter pieces?It’s a
valid question and something
that I have researched extensively.The purpose of this post is to
shed light on just how long
your blog articles should be.There’s one thing I always want to
make clear regarding word
count.It only matters if the content is good.Word count is not a
standalone ranking factor.
Word count only has merit if the content quality is high!You can
produce a 10,000-word
article. But if the content and quality suck, then the article
doesn’t deserve to get ranked. You
lose.Is word count important?Yes, it is, and that’s why I write
about it often.But word count
is only important when coupled with super high quality.
REFERENCE:

https://www.google.com/search?
q=word+count+using+html+introduction&oq=word+count+using+html+intr
&gs_lcrp=EgZjaHJvbWUqCQgBECEYChigATIGCAAQRRg5MgkIARAhG
AoYoAEyCQgCECEYChigAdIBCDYzODNqMGo3qAIIsAIB&sourceid=chr
ome&ie=UTF-8

https://www.geeksforgeeks.org/word-and-character-counter-using-html-css-
and-javascript/

https://stackoverflow.com/questions/38102141/how-to-make-a-word-count-
that-contains-html-tags-using-javascript
Conclusion
Word count.It’s a topic
that receives a lot of
coverage these
days.Bloggers and
content
marketers are always
wondering what’s the
ideal word count to shoot
for.Should every single
piece be long form, or is
it better to opt for shorter
pieces?It’s a valid
question and something
that I have researched
extensively.The purpose
of this post is to shed
light on just how long
your blog articles should
be.There’s one thing I
always want to make
clear regarding word
count.It only matters if
the content is good.Word
count is not a standalone
ranking factor.
Word count only has
merit if the content
quality is high!You can
produce a 10,000-word
article. But if the content
and quality suck, then
the article doesn’t
deserve to get ranked.
You
lose.Is word count
important?Yes, it is, and
that’s why I write about it
often.But word count
is only important when
coupled with super high
quality.