Have you ever worried about the word count in an essay, blog post or school project? A word count can save you time!
In this guide, I will show you how to create your own word counter using HTML, CSS and JavaScript. I will explain everything clearly without confusing the code. Consider this your simple plan before you create the actual program. In the previous tutorial, I showed you how to create a QR Code Generator, today I will show you how to create a Word Counter. Let us get started with the tutorial.
Live demo:
Below is a live demo that will help you understand how the look Word Counter.
Why a Word Counter is Important?
Before we get into creating a word counter, let us take a quick look at why you need a word counter.
- SEO and Blogging: Research from HubSpot and Backlinko shows that blog posts between 1000 to 2000 words perform better in search results.
- Reading Time: The average adult reads about 200-250 words per minute. That means a 1200 word article = about 5-6 minutes of reading time.
HTML:
We start with the HTML structure by creating a <div> element with the class name container. It acts as the main container that holds all the elements of our word counter tool in one place.
Below the heading we create a <textarea> element with the ID set to "textInput". This is where the user will be able to type their text. We also provide a placeholder attribute with the message "Type or paste your text here..." which gives the user a hint about what to do.
<div class="container">
<h1>Word Counter</h1>
<textarea id="textInput" placeholder="Type or paste your text here..."></textarea>
<div class="result">
<p>Words: <span id="wordCount">0</span></p>
<p>Characters: <span id="charCount">0</span></p>
</div>
</div>After that we create another <div> with the class name "result". This section is meant to display the output of our counter. Inside this results container we add 2 paragraphs (<p> elements).
- The first paragraph shows the Word count and we use a
<span>element with the id "wordCount" to dynamically display the number of words (default set to 0). - The second paragraph shows the Character count. Here the character count is updated using another
<span>element with the id "charCount" (the default Character count is set to 0).
And that’s it! With just this structure we already have the layout of our Word Counter tool ready. All that remains is styling it with CSS and making it functional with JavaScript.
Stylesheet (CSS):
Centering the word counter:Coming to the CSS section, we start by targeting the <body> element. First, we apply a flexbox layout by setting display to flex. This helps us easily center the content within the page. Next, we use justify-content to center it and align-items to center everything on the screen horizontally and vertically.
For the font we choose a clean and simple look by setting font-family to sans-serif. Then we color the background a bright blue using the hex code #6ba6ff. Next we set the height to 100vh so that the layout covers the entire screen. Finally we remove the browser default margin by setting the margin to 0.
body {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background: #6ba6ff;
height: 100vh;
margin: 0;
}
Next we style the "container" class. We start by setting the background color to white using #fff which makes the content stand out against the blue page background.
We then add 20px of padding to create some space inside the container. To give the box a more modern look we set the border-radius to 12px which rounds the corners.
For a polished effect we add a box-shadow with a slight blur. Finally we set the text-align to center so that all the text inside the container is nicely centered.
.container {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
}We simply add We simply add margin-bottom to 15px to create some space beneath the heading.margin-bottom to 15px to create some space beneath the heading.
h1 {
margin-bottom: 15px;
}Coming to the <textarea> styling, we first set a fixed width of 400px and a height of 150px, which gives the user enough space to type their content comfortably.
We then add 10px of padding inside the box so that the text doesn't touch the edges. We set the margin to 10px to create some breathing space around the element.
To soften we apply a border-radius of 8px, which rounds the corners slightly. The border is set to a value of 1px solid #ccc, which gives it a light gray outline.
Next we disable the ability to resize the text box by setting resize to none.
And finally we set the font-size to 16px to make the text inside the text area comfortable for more users to work with.
textarea {
width: 400px;
height: 150px;
padding: 10px;
margin: 10px;
border-radius: 8px;
border: 1px solid #ccc;
resize: none;
font-size: 16px;
}Finally, we style the result section. We start by adding 15px to margin-top, which creates a little space above the results area.
Then we set display to flex to align the results items (such as Word Count and Character Count). We use justify-content to space-around to distribute the space evenly between the elements. Using space-around makes the layout look balanced. And finallyy hmmm.., we set font-weight to highlight the label at the end.
.result {
margin-top: 15px;
display: flex;
justify-content: space-around;
font-weight: bold;
}JavaScript:
Coming to the JavaScript section, we first take references to the HTML elements we need:
- Take the reference of textarea element with the help of "textInput" variable.
- And the other two variables are the span element which will be used to display the word and character count.
const textInput = document.getElementById("textInput");
const wordCount = document.getElementById("wordCount");
const charCount = document.getElementById("charCount");
textInput.addEventListener("input", () => {
let text = textInput.value.trim();
// Count words (filter removes empty strings from multiple spaces)
let words = text === "" ? 0 : text.split(/\s+/).filter(word => word.length > 0).length;
// Count characters
let chars = text.length;
wordCount.textContent = words;
charCount.textContent = chars;
});Next we add an event listener to the textarea that listens for "input" events. This means our function will run whenever the user types or deletes text. Inside the function we first get the current text from the textarea and use trim() to remove extra spaces at the beginning or end.
We split the text using whitespace to count words. We then filter out any empty strings that might appear when typing multiple spaces. If the textarea is empty we simply set the word count to 0.
For characters we simply take the total length of the text.
Finally we update the contents of the wordCount and charCount elements so that the page numbers are updated in real time as the user types.
Output:
Dark mode:
Today we are ending the Word Counter tutorial here, and if you have any questions about the Word Counter, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial Namaste🙏
Post a Comment