Discover a suite of powerful free tools crafted for human like precision . unleash the potential of your website with these intuitive solution that seamlessly blend automation with personal touch . with these versatile user friendly tools revolutionizing how you conquer challenges and propel your online visible to unprecedented heights
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 90%;
text-align: center;
}
h1 {
color: #3498db;
margin-bottom: 20px;
}
textarea {
width: 100%;
padding: 15px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 8px;
resize: none;
}
.output {
margin-top: 20px;
font-size: 18px;
color: #2c3e50;
}
.output p {
margin-bottom: 10px;
}
.output span {
font-weight: bold;
color: #3498db;
}
@media (max-width: 600px) {
textarea {
font-size: 14px;
}
.output p {
font-size: 16px;
}
}
// Function to count words and characters
function countWordsAndChars(text) {
// Character count
const charCount = text.length;
// Word count (splitting on whitespace, filtering empty words)
const wordCount = text.trim().split(/\s+/).filter(word => word.length > 0).length;
return { charCount, wordCount };
}
// Function to update the UI
function updateCounts() {
const textInput = document.getElementById('textInput').value;
const { charCount, wordCount } = countWordsAndChars(textInput);
// Update the count display
document.getElementById('charCount').textContent = charCount;
document.getElementById('wordCount').textContent = wordCount;
}
// Event listener for text input
document.getElementById('textInput').addEventListener('input', updateCounts);
Features:
Real-time Counting: As users type or paste text into the textarea, the word and character counts update instantly.
Word and Character Separation: The code uses spaces to separate words and ignores multiple consecutive spaces.
Responsive Design: The layout adjusts for both desktop and mobile views.
Colorful Styling: The interface uses a fresh blue theme with distinct colors for text and counts.
Explanation:
HTML:
Contains a textarea for text input and displays the word and character counts using dynamic spans.
div.output holds the results in a clean layout.
CSS:
Provides a modern, minimal design with a light background and centered container.
Ensures the textarea is user-friendly, with rounded borders and a responsive style.
JavaScript:
Adds an event listener to detect changes in the textarea. Every time the user types, the word and character count is updated in real time.
Uses a simple function to count words by splitting on spaces and filtering out extra spaces.
This tool provides an easy and efficient way to count the number of characters and words in any text block.
.png)
.png)
Comments
Post a Comment