Character Counter Tool Script
To create a character counter tool script using HTML, CSS, and JavaScript, you can use the following code:
<!DOCTYPE html>
<html>
<head>
<title>Character Counter Tool</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Character Counter Tool</h1>
<textarea id="textArea" rows="6" placeholder="Enter your text here..." oninput="countCharacters()"></textarea>
<p id="characterCount">Characters: 0</p>
<script src="script.js"></script>
</body>
</html>
style.css:
body {
text-align: center;
margin-top: 100px;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
textarea {
width: 400px;
margin: 20px auto;
padding: 5px;
resize: none;
}
#characterCount {
color: #666;
}
script.js:
function countCharacters() {
const textArea = document.getElementById('textArea');
const characterCount = document.getElementById('characterCount');
const text = textArea.value;
const count = text.length;
characterCount.textContent = `Characters: ${count}`;
}
In this example, the index.html file contains a textarea element where the user can enter their text. The oninput event is used to trigger the countCharacters function whenever the user inputs or changes the text.
The countCharacters function gets the text from the textarea, calculates the length of the text using the length property, and updates the character count in the characterCount element.
The style.css file is used to style the elements, and the JavaScript code is included in the script.js file.
Save all these files in the same directory and open the index.html file in a web browser. As you type or change the text in the textarea, the character count will be updated dynamically.
0 Comments