Word & Character Counter
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.counter {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
color: #3498db;
margin-bottom: 20px;
}
textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
}
.counter-info {
margin-top: 10px;
}
p {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
#word-count, #char-count {
font-weight: bold;
color: #27ae60;
}
const textInput = document.getElementById("text-input");
const wordCountSpan = document.getElementById("word-count");
const charCountSpan = document.getElementById("char-count");
textInput.addEventListener("input", () => {
const text = textInput.value;
const words = text.split(/\s+/).filter(word => word.length > 0);
wordCountSpan.textContent = words.length;
charCountSpan.textContent = text.length;
});
