Shree Ambabai Talim Sanstha's

SANJAY BHOKARE GROUP OF INSTITUTES, MIRAJ

FACULTY OF POLYTECHNIC
Institute Code: 1552

Department Of Computer Engineering

Micro Project Report
On

Word Count Using HTML

Prepared By

Roll no. Enrolment No. Name

3318 2215520030 Faika Farukh Shaikh
3305 2215520013 Sakshi Sunil Kamble
3323 23213180253 Komal Bhauso Gadade

Under the Guidance of

Ms. D. S. Aitawade
Submitted To

Maharashtra State Board of Technical Education, Mumbai

(Autonomous) (ISO-9001-2008) (ISO/IEC 27001:2013)
Academic Year 2024-2025

1
This is to certify that Mr. / Ms. ………………………………………………………
Roll No.….…., of ………... Semester of Diploma in………………….. Engineering ,
of Institute
(Code: ) has completed the Micro-Project work satisfactorily in course
Client Side Scripting Language 22519 for the academic year 2024 to 2025 as
prescribed in the curriculum.

Place: Miraj Enrollment No:.……………

Date: …………… Exam. Seat No: ……………

2
 This is to certify that following students,

3318 2215520030 Faika Farukh Shaikh

3305 2215520013 Sakshi Sunil Kamble
3323 23213180253 Komal Bhauso Gadade

of 5Th Semester of Diploma in Computer Engineering , of Institute (Code:

) are completed the Micro Project work satisfactorily in course

Client Side Scripting Language 22519 for the academic year 2024 to 2025 as
prescribed in the curriculum.

Place: Miraj

Date:…………

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

This Micro-Project aims at:

 Create a container in which all the elements are present.
 Add 1 Text area field in which the user writes texts.
 Add JavaScript logic which counts the word and character in the textbox and prints the
result in the paragraph element.
 In the paragraph element, we provide two <span> elements for word counters and another
for the character counters.

 Understand the roles of HTML, CSS, and JavaScript in web development and how these
technologies work together to create interactive web pages.

 Gain proficiency in writing and structuring HTML documents using elements, attributes, and the
Document Object Model (DOM).

 Learn to style web pages effectively using CSS, including the implementation of selectors,
combinators, and media queries for responsive designs.

Basic computer literacy, including the ability to navigate the file system and use a text editor.

A fundamental understanding of how the web works, including familiarity with the internet and
web browsers.

No prior programming experience is required, but an understanding of basic programming

concepts can be beneficial.

4
 Create a container in which all the elements are present.
 Add 1 Text area field in which the user writes texts.
 Add JavaScript logic which counts the word and character in the textbox and prints the result in
the paragraph element.

(major resources like raw material, tools, software etc.)

1 Laptop/Computer 1
2 Internet

(Sequence and time required for major activities for 8 Weeks)

1
2

********

5
 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 Text area. 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.

a) Acquire practical knowledge in manipulating the HTML DOM to dynamically alter the content
and structure of web pages.
b) Implement form validation using HTML5 attributes and JavaScript to ensure data integrity and
enhance user experience.
c) Explore the use of regular expressions for advanced form validation and data cleanup to
maintain high-quality user input.
d) Create and manipulate lists, tables, and other complex UI elements programmatically using
JavaScript.

W3Schools maintains a complete JavaScript reference, including all HTML and browser objects.
The reference contains examples for all properties, methods and events, and is continuously updated
according to the latest web standards.

Code/Program
<!DOCTYPE html>
6
<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>
7
<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;
8
/* margin-left: 220px; */
width: 350px;
height: 40px;
display: block;
text-align: center;
}
#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">
<title>Word and Character Count Tool</title>
</head>
<body>
<h1>Word and Character Count Tool</h1>

<label for="inputText">Enter your text below:</label><br>

<textarea id="inputText" rows="6" cols="50" placeholder="Type or paste your text
here..."></textarea><br><br>

<button onclick="countWordsAndCharacters()">Count Words and Characters</button>

<p id="result"></p>

9
 <script>
function countWordsAndCharacters() {
// Get the text from the textarea
var text = document.getElementById("inputText").value;

// Count the words by removing extra spaces and splitting by whitespace

var words = text.trim().split(/\s+/);
var wordCount = text.trim() === "" ? 0 : words.length;
// Count the characters (including spaces)
var charCount = text.length;
// Display the word and character count result
document.getElementById("result").innerText =
"Word count: " + wordCount + "\nCharacter count: " + charCount;
}
</script>
</body>
</html>

Mention the actual resources used)

1 Laptop/Computer 1
2 Internet

10
 1. HTML Form Handling
- Text Areas: You learned how to create and manipulate a textarea element to capture user
input. It’s a key component for handling multiline text input in web forms.
2. JavaScript Basics
- Event Handling: The input event listener helps you understand how to capture changes in
user input in real-time. This is a common requirement in interactive web apps.
- Filtering Data: You filtered out empty spaces with .filter() to ensure the word count only
includes valid words, which strengthens your understanding of array methods in JavaScript.
3. DOM Manipulation
- Updating Elements: You learned how to update the content of an HTML element
dynamically (i.e., updating the word count in real-time). This showcases how JavaScript
interacts with the DOM.
4. Regular Expressions
- You gained insight into basic regular expressions (/\s+/) to split text by spaces or multiple
spaces. Regular expressions are powerful for pattern matching and manipulating text data.

1. Text Editors: Provides real-time word count for writers in tools like Google Docs or Microsoft Word.
2. Blogging Platforms: Helps bloggers and content creators adhere to word limits.
3. *Online Forms*: Ensures users meet minimum or maximum word count requirements in fields like
comments, feedback, or essays.
4. *SEO Tools*: Assists in evaluating the word count of web content for search engine optimization.
5. *Educational Platforms*: Used for assignments or exams to track writing progress in online
submissions.
11
Applications of word count using HTML include text editors, blogging platforms, online forms,
SEO tools, and educational platforms for tracking word limits and writing progress.
Future improvements for word count using HTML could include counting characters, sentences,
and paragraphs, detecting grammar issues, and providing real-time writing suggestions.

12
 …………………………………………………………
……………………………………

……………………………………………………………
…

…………………………………………………………………………………………………….

……………………………………………………………………………………………………………………………………
…………..
……………………………………………………………………………………………………………………………………
……………
……………………………………………………………………………………………………………………………………
…………….

 (Please tick in appropriate cell for each characteristic)

Relate to very Related to Take care of Take care of

few LOs some Los at- least one more than
CO one
 ..
Not more At-least 5 At –least 7 About 10
than two relevant relevant relevant
sources sources, at sources, most sources, most
(primary least 2 latest latest latest
and
secondary),
very old
Completed Completed 50 Completed 60 Completed
less to to more
than 50% 60% 80% than 80 %

13
 Sample Size Sufficient and Sufficient and Enough data
small, data appropriate appropriate collected by
neither sample, sample, sufficient and
organized nor enough data enough data appropriate
presented well generated but generated sample size.
not organized which is Proper
and not organized and inferences
presented presented well drawn by
well. No or but poor organising and
poor inferences presenting
inferences drawn data through
drawn tables, charts
and graphs.

5 Incomplete Just Well Well

fabrication/ass assembled/fabri assembled/fabri assembled/fabri
embly. cated and parts cated with cated with
are not proper proper
functioning functioning functioning
well.
Not in proper parts. In proper parts. In proper
shape, shape, within shape, within
dimensions tolerance tolerance
beyond dimensions and dimensions and
tolerance
limit. good good
Appearance/ finish/ finish/
finis appearanc appearanc
h is shabby. e. But no e. Creativity in
creativity in design and use
design and use of material
of material

Very short, Nearly sufficient Detailed, correct Very detailed,

poor quality and correct and clear correct, clear
sketches, details about description of description of
Details about methods, methods, methods,
methods, material, materials, materials,
material, precautions and precautions and precautions and
precaution conclusion, but Conclusions. conclusions.
and
conclusions clarity is not Sufficient Enough tables,
omitted, some there in Graphic charts and
details are presentation. Description. sketches
But
wrong not enough
graphic
description.

Major Includes major Includes major Well organized,

information is information but information and includes major
not included, not well well organized information ,wel

14
 l
information is organized and but not presented
not well not presented presented well
organized . well
Any other
(depending
upon nature of
project: please
write
indicators
by pen)
Could not Replied to Replied Replied most of
reply properly
to considerable to considerable the questions
considerable
number of number of number of properly
question. questions but question.
not very
properly

Every course teacher is expected to assign marks for group evolution for each group of
students in first 3 columns as per rubrics & individual evaluation in 4TH column for each
group of students as per rubrics based on viva.

15
Signature:…………………………………………..

Date:…………………………………

16
17
18