html
Copy code
Word & Character Counter
CSS (styles.css)
css
Copy code
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.container {
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 500px;
width: 100%;
box-sizing: border-box;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 150px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
font-size: 16px;
resize: none;
box-sizing: border-box;
margin-bottom: 20px;
}
textarea:focus {
border-color: #ff7e5f;
outline: none;
box-shadow: 0 0 5px rgba(255, 126, 95, 0.5);
}
.output {
display: flex;
justify-content: space-around;
font-size: 18px;
}
.output p {
margin: 0;
color: #333;
}
.output span {
font-weight: bold;
color: #ff7e5f;
}
JavaScript (script.js)
javascript
Copy code
document.addEventListener('DOMContentLoaded', () => {
const textInput = document.getElementById('text-input');
const charCount = document.getElementById('char-count');
const wordCount = document.getElementById('word-count');
textInput.addEventListener('input', () => {
const text = textInput.value;
charCount.textContent = text.length;
wordCount.textContent = countWords(text);
});
function countWords(text) {
if (text.trim().length === 0) {
return 0;
}
return text.trim().split(/\s+/).length;
}
});
