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);
}());
MathGenius Pro – AI-Powered Math Solver Using Python Introduction: From simple arithmetic to more complicated college-level subjects like integration, differentiation, algebra, matrices, …
CipherMaze: The Ultimate Code Cracking Quest Game Using Python Introduction: You can make CipherMaze, a fun and brain-boosting puzzle game, with Python …
Warp Perspective Using Open CV Python Introduction: In this article, we are going to see how to Create a Warp Perspective System …
Custom AI Story Generator With Emotion Control Using Python Introduction: With the help of this AI-powered story generator, users can compose stories …
Get Huge Discounts
More Python Projects
