Sujay's Free Tools(WCC Tool)
Certainly! Below is a simple implementation of a Word & Character Counter tool using HTML, CSS, and JavaScript. The code includes colorful styling and utilizes the jQuery library for simplicity. Make sure to include the jQuery library in your HTML file if you haven't already.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word & Character Counter</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
}
textarea {
width: 80%;
height: 150px;
margin: 20px auto;
padding: 10px;
font-size: 16px;
}
#counter {
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Word & Character Counter</h1>
<textarea id="inputText" placeholder="Type or paste your text here..."></textarea>
<div id="counter">Words: 0 | Characters: 0</div>
<script>
$(document).ready(function() {
$("#inputText").on("input", function() {
var text = $(this).val();
var words = text.match(/\S+/g) || [];
var characters = text.length;
$("#counter").text("Words: " + words.length + " | Characters: " + characters);
});
});
</script>
</body>
</html>This code creates a responsive Word & Character Counter tool with a textarea for input and a counter display below. The JavaScript uses jQuery to update the counter in real-time as the user types or pastes text into the textarea. The styling includes a simple and clean design with a light background color and a contrasting text color.
Comments
Post a Comment