Hello fellow developers !!!
Welcome to this exciting journey of creating a stylish Text and Word Counter using HTML and CSS. Today, we're going to dive into the world of web development and craft something amazing together
Feel free to adjust the text further to suit your preferences!!!
Preview
HTML Code Structure :-
index.html
<!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> Text & Words Counter </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<h2>Text & Words Counter</h2>
<textarea id="inputText" cols="10" rows="5" placeholder="Enter text here..."></textarea>
<div class="output">
<span id="char">0 Characters</span>
<span id="words">0 Words</span>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
CSS Code Structure :-
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #0f172a;
flex-direction: column;
}
.box h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.output {
display: flex;
justify-content: space-between;
}
.box {
display: flex;
flex-direction: column;
text-align: center;
padding: 35px;
cursor: pointer;
border: 0;
outline: none;
border-radius: 5px;
background-color: #252525;
color: #fff;
position: relative;
}
.box:active {
background-color: transparent;
color: #fff;
}
.box::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
z-index: -1;
border-radius: 5px;
animation: spin 15s linear infinite;
background-size: 400%;
filter: blur(5px);
opacity: 0;
transition: 0.4s;
}
.box:hover:before {
opacity: 1;
}
textarea {
background-color: #252525;
color: white;
border: none;
outline: none;
padding: 2rem 0;
text-align: left;
resize: none;
}
@keyframes spin {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
JavaScript Code Structure :-
script.js
const userText = document.getElementById('inputText')
const characters = document.getElementById('char')
const totalWords = document.getElementById('words')
userText.addEventListener('input', function () {
characters.innerHTML = userText.value.length + ' Characters';
totalWords.innerHTML = userText.value.trim().split(' ').length + ' Words'
})
Follow Us