Word Counter Website Using HTML , CSS And JavaScript With Source Code
Introduction :
Hello developer friends, all of you are welcome to this superhit blog post. Today we have created an amazing word counter website in which you can count the words. Also, the special thing about this word counter is that you can also upload the words in it. Friends, let me tell you that to make this word counter, we have taken the help of HTML CSS as well as JavaScript. We have taken the help of JavaScript so that we can count the words. If we do not take the help of JavaScript then our Word Counter website will not work.
Friends, in this Word Counter website, we have created Navbar i.e. Header in which we have added some menus.
<nav class="navbar">
<div class="logo">
<h1>Developergtm</h1>
</div>
<div class="item">
<a href="">Home</a>
<a href="">About</a>
<a href="">Tools</a>
<a href="">Contact Us</a>
</div>
</nav>
And friends, we have also added a logo in the navbar, which you can easily change, like we have added Home, About, Tools, and Contact buttons in the navbar. If you want, you can change these also.
<div class="main-sec">
<h1>Word Counter</h1>
<div class="column">
<form method="POST" action="#">
<textarea id="countfield" data-count-limit="140" rows="3"></textarea>
<p id="countlabel" class="label right countunder"><span id="countnumber">0</span> characters</p>
<input type="submit" value="Submit">
</form>
</div>
</div>
Friends, this word counter is the structure of the text area of the website. If you put text outside the text area, then you will not be able to put it. You will be able to put text only in the size of the text area that we have given.
<section class="hero">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio itaque error quo. Iusto, commodi libero
sunt a voluptates suscipit vitae veritatis placeat accusantium in, voluptatum itaque voluptas, sapiente et
dolores.</p>
</section>
<footer class="navbar">
<div class="logo">
<h1>Developergtm</h1>
</div>
<div class="item">
<a href="">About</a>
<a href="">Contact Us</a>
<a href="">Privacy Policy</a>
<a href="">Disclaimer</a>
<a href="">Terms Condition</a>
</div>
</footer>
Steps to Create a Word Counter Website:-
Now to use the code of Word Counter website, you have to follow this point.
- First of all, create a folder in the computer and then open that folder in your code editor.
- After opening the folder in the code editor, you have to create three files in that folder: index.html, style.css and script.js. If you want, you can name these files something else.
- Now if you have also created a file inside the folder, then upload the code given below in your created file as per the heading.
HTML (index.html)
Get Discount on Top Educational Courses
<title>Document</title>
<nav class="navbar">
<div class="logo">
<h1>Developergtm</h1>
</div>
<div class="item">
<a href="">Home</a>
<a href="">About</a>
<a href="">Tools</a>
<a href="">Contact Us</a>
</div>
</nav>
<div class="main-sec">
<h1>Word Counter</h1>
<div class="column">
<textarea id="countfield" data-count-limit="140" rows="3"></textarea>
<p id="countlabel" class="label right countunder"><span id="countnumber">0</span> characters</p>
</div>
</div>
<section class="hero">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio itaque error quo. Iusto, commodi libero
sunt a voluptates suscipit vitae veritatis placeat accusantium in, voluptatum itaque voluptas, sapiente et
dolores. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio itaque error quo. Iusto,
commodi libero sunt a voluptates suscipit vitae veritatis placeat accusantium in, voluptatum itaque
voluptas, sapiente et dolores.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio itaque error quo. Iusto, commodi libero
sunt a voluptates suscipit vitae veritatis placeat accusantium in, voluptatum itaque voluptas, sapiente et
dolores.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio itaque error quo. Iusto, commodi libero
sunt a voluptates suscipit vitae veritatis placeat accusantium in, voluptatum itaque voluptas, sapiente et
dolores.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio itaque error quo. Iusto, commodi libero
sunt a voluptates suscipit vitae veritatis placeat accusantium in, voluptatum itaque voluptas, sapiente et
dolores. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit laborum, voluptatibus adipisci
eveniet dignissimos eos illum repudiandae dolorem nulla ducimus?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio itaque error quo. Iusto, commodi libero
sunt a voluptates suscipit vitae veritatis placeat accusantium in, voluptatum itaque voluptas, sapiente et
dolores.</p>
</section>
<footer class="navbar">
<div class="logo">
<h1>Developergtm</h1>
</div>
<div class="item">
<a href="">About</a>
<a href="">Contact Us</a>
<a href="">Privacy Policy</a>
<a href="">Disclaimer</a>
<a href="">Terms Condition</a>
</div>
</footer>
CSS (Style.css)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
/* padding: 4.3em 0; */
background-color: whitesmoke;
}
.navbar{
background-color: black;
height: 70px;
display: flex;
justify-content: space-between;
padding: 0 10%;
align-items: center;
}
.navbar .logo h1{
color: white;
}
.navbar .item a{
display: flex;
column-gap: 20px;
color: white;
}
.navbar .item{
display: flex;
column-gap: 20px;
color: white;
}
.main-sec{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 50px;
}
.column {
margin: 0 auto;
width: 900px;
}
textarea {
border: 4px solid #3B94D9;
display: block;
font-size: 1rem;
margin: 0 0 0.694em;
padding: 0.781rem;
width: 100%;
height: 400px;
}
input[type="submit"] {
background: #3B94D9;
border: none;
border-radius: 4px;
box-shadow: none;
color: white;
cursor: pointer;
font-size: 1.125rem;
opacity: 1;
padding: 0.694rem 2.074rem;
text-transform: uppercase;
transition: opacity 0.2s linear;
}
input[type="submit"]:hover {
opacity: 0.8;
}
.label {
margin: 0 0 1.44rem;
width: 50%;
}
.label.left {
float: left;
}
.label.right {
float: right;
text-align: right;
}
.countunder {
color: #1e78bd;
padding: 10px;
width: 150px;
border: 2px solid rgb(21, 122, 238);
background: white;
font-size: 19px;
}
.hero{
background-color: white;
height: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 10%;
align-items: center;
padding-top: 20px;
padding-bottom: 50px;
}
Javascript (Script.js)
(function(){
var countField = document.getElementById('countfield');
var countLabel = document.getElementById('countlabel');
var countNum = document.getElementById('countnumber');
function _handleKeyUp(e){
var limit = Number(this.getAttribute('data-count-limit'));
var text = this.value;
countNum.textContent = text.length;
}
countField.addEventListener('keyup', _handleKeyUp, false);
}());
ATS Friendly Resume Template for Fresher | Get 90+ ATS Score Easily Edit As Word Document Click on the link above → …
Google Careers – Software Engineer, University Graduate, 2026 Software Engineer Hyderabad, Telangana, India Full Time Rs. 75.8 LPA September 22, 2025 Apply …
URL Shortener Using Python Django Introduction: Long URLs can be shortened into short, shareable links with the help of the URL Shortener …
User Authentication System Using Python Django Introduction: The implementation of safe and adaptable user authentication in Django is the main goal of …
Get Huge Discounts
More Python Projects
