In this blog post, we’ll go over a simple HTML/CSS/JavaScript project that counts words, characters, sentences, and paragraphs in a text input field.
HTML has head and body structure. Head defines page metadata, such as character set, compatibility and title, and links to stylesheet “style.css”. Body holds the main HTML structure for the Word Counter.
Here, we have two main containers: a textField and a wordCount. The textField container holds two sub-containers: textFieldDisplay and textFieldArea. The textFieldDisplay contains two paragraphs that display the word and character count, along with a “reset” button. The textFieldArea contains the text input field with a default message to “Start Typing…”. The wordCount container contains 4 paragraphs that display the word, character, sentence, and paragraph count respectively.
The JavaScript code is responsible for counting the words, characters, sentences, and paragraphs as the user types in the text input field. This is done using the addEventListener method that listens for the “input” event on the text input field. When the user inputs text, the JavaScript code splits the text into words, characters, sentences, and paragraphs using various regex expressions, such as split(/\s+/) for words and split(/\n+/) for paragraphs. These values are then displayed in the relevant HTML elements using innerHTML.
The reset button is also given functionality using the addEventListener method. When the button is clicked, the text input field is reset to an empty string, and the count values for words, characters, sentences, and paragraphs are set back to 0.
That’s all for this Word Counter project! With a simple HTML structure, a bit of JavaScript, and some styling, we were able to create a functional word counting tool.
Video Tutorial of Word Counter
To see a live demonstration of the Word Counter, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Word Counter
HTML:
Create a new file with the name “index.html” and add the provided code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section>
<h2>Word Counter</h2>
<div class="container">
<div class="textField">
<div class="textFieldDisplay">
<p>Words: <span class="words">0</span></p>
<p>Characters: <span class="characters">0</span></p>
<button class="reset">reset</button>
</div>
<div class="textFieldArea">
<textarea id="textInput" required spellcheck="false"></textarea>
<span>Start Typing...</span>
</div>
</div>
<div class="wordCount">
<h4>Details</h4>
<p>Words: <span class="words">0</span></p>
<p>Characters: <span class="characters">0</span></p>
<p>Sentences: <span id="sentences">0</span></p>
<p>Paragraphs: <span id="paragraphs">0</span></p>
</div>
</div>
</section>
</body>
</html>
The code is an HTML file that creates a Word Counter web page. It has a header with a title, “Word Counter”, and links to a CSS file called “style.css” for styling.
The body of the page has a section with a h2 heading, “Word Counter”, and a div with a class of “container” that holds two more divs. The first div has a class of “textField” and contains two divs inside: a div with a class of “textFieldDisplay” and a div with a class of “textFieldArea”. The first div displays the number of words and characters in the textarea, with a reset button. The second div contains a textarea for inputting text and a span that says “Start Typing…”.
The second div in the container has a class of “wordCount” and displays the number of words, characters, sentences, and paragraphs in the text input.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Poppins;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#00c6ff, #0078ff);
padding: 15px;
}
section{
position: relative;
padding: 20px;
width: 1000px;
height: 100%;
background: #fff;
border-radius: 20px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
section h2{
color: rgba(0, 0, 0, 0.7);
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.container .textField{
position: relative;
width: 100%;
height: 100%;
}
.textField .textFieldDisplay{
position: relative;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.textFieldDisplay p{
color: #858585;
font-size: 1.2em;
}
.textFieldDisplay p span{
color: rgba(0, 0, 0, 0.7);
font-weight: 600;
margin-left: 5px;
}
.textFieldDisplay .reset{
position: absolute;
right: 0;
padding: 10px 12px;
color: rgba(0, 0, 0, 0.7);
font-size: 1em;
font-weight: 600;
text-transform: uppercase;
background: linear-gradient(#00c6ff, #0078ff);
outline: none;
border: none;
border-radius: 10px;
box-shadow: 0 12px 18px rgba(0, 0, 0, 0.12);
transition: .3s ease;
cursor: pointer;
}
.textFieldDisplay .reset:hover{
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.textField .textFieldArea{
position: relative;
}
.textFieldArea textarea{
position: relative;
width: 100%;
height: 200px;
resize: none;
color: rgba(0, 0, 0, 0.7);
background: transparent;
border: 2px solid #858585;
border-radius: 5px;
outline: none;
padding: 12px 15px;
font-size: 1em;
transition: .5s ease;
}
.textFieldArea textarea:valid,
.textFieldArea textarea:focus{
border: 2px solid #00c6ff;
}
.textFieldArea textarea::-webkit-scrollbar{
display: none;
}
.textFieldArea span{
position: absolute;
left: 0;
padding: 5px 15px;
pointer-events: none;
font-size: 1em;
color: #858585;
transition: .3s ease;
}
.textFieldArea textarea:valid ~ span,
.textFieldArea textarea:focus ~ span{
color: rgba(0, 0, 0, 0.7);
transform: translateX(10px) translateY(-10px);
font-size: 0.9em;
padding: 0 10px;
background: #00c6ff;
border-left: 1px solid #00c6ff;
border-right: 1px solid #00c6ff;
letter-spacing: 0.1em;
border-radius: 5px;
}
.wordCount{
position: relative;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
.wordCount h4{
color: rgba(0, 0, 0, 0.7);
letter-spacing: 0.02em;
margin-bottom: 10px;
cursor: pointer;
}
.wordCount p{
color: #858585;
font-size: 1.2em;
}
.wordCount p span{
color: rgba(0, 0, 0, 0.7);
font-weight: 600;
margin-left: 5px;
}
This CSS code is for a text editor where users can write and edit text. The overall layout of the page is a flexbox with the body display set to flex and justify-content and align-items set to center, making the contents of the page center-aligned. The background of the body is a linear gradient with two colors (#00c6ff and #0078ff).
The text editor is housed in a section with a white background, a border radius of 20px, and a box shadow. The section’s width is set to 1000px.
The main container within the section is a flexbox with the class “container”. Each text field is housed in a div with the class “textField”. The display of the text field is a flexbox with the class “textFieldDisplay” and consists of a label and a reset button. The textarea within the text field has a border of 2px, a border radius of 5px, and an outline of none.
The word count display is a “wordCount” class flexbox showing the word count in the textarea. The design is simple and focuses on making the textarea the main focus of the page.
JavaScript:
In between the <body></body> tags, you can include JavaScript code by enclosing it within <script> tags.
const textInput = document.getElementById('textInput');
const reset = document.querySelector('.reset');
textInput.addEventListener('input', ()=>{
let text = textInput.value.trim();
let words = text ? text.split(/\s+/).length : 0;
let characters = text ? text.length : 0;
let sentences = text ? text.split(/[.!?]+/).length : 0;
let paragraphs = text ? text.split(/\n+/).length : 0;
const wordElements = document.querySelectorAll('.words');
const characterElements = document.querySelectorAll('.characters');
for(let i = 0; i < wordElements.length; i++){
wordElements[i].innerHTML = words;
}
for(let i = 0; i < characterElements.length; i++){
characterElements[i].innerHTML = characters;
}
document.getElementById('sentences').innerHTML = sentences;
document.getElementById('paragraphs').innerHTML = paragraphs;
})
reset.addEventListener('click', ()=>{
textInput.value = "";
const wordElements = document.querySelectorAll('.words');
const characterElements = document.querySelectorAll('.characters');
for(let i = 0; i < wordElements.length; i++){
wordElements[i].innerHTML = 0;
}
for(let i = 0; i < characterElements.length; i++){
characterElements[i].innerHTML = 0;
}
document.getElementById('sentences').innerHTML = 0;
document.getElementById('paragraphs').innerHTML = 0;
})
This JavaScript code is a word and character counter for a text input field. It has two main parts: an event listener that updates the counters and displays the results, and a reset button that clears the text input field and resets all counters to zero.
The event listener is attache to the text input field, and it triggers every time the input value changes. The first line of the event listener function trims the input text to remove any leading or trailing white spaces.
Next, the code uses the split method to split the input text into words, sentences, and paragraphs based on specific delimiters. If the input text is empty, the code sets the word, character, sentence, and paragraph counts to zero.
The code then updates the counters by setting the innerHTML property of several HTML elements. For the words and characters counters, the code uses two for loops to update all elements with the class “words” and “characters” respectively. The sentences and paragraphs counters are update using document.getElementById(‘sentences’) and document.getElementById(‘paragraphs’).
The reset button is implement using another event listener that is attache to an HTML element with the class “reset”. The function for this event listener simply sets the text input value to an empty string, and resets all counters to zero by setting their innerHTML to 0.
Summary:
This code creates a word counter website with a text area for users to input text. As they type, the number of words, characters, sentences, and paragraphs are calculate and displayed in real-time. A reset button is also include to clear the text and values. The HTML code includes header section with metadata and a stylesheet, and a body section with the content and script to perform the word count calculation and display the values. The CSS code sets the font, background, layout, and styling for the website.
