<textarea id="blogPost" placeholder="Enter your blog post..." class="blogPost"></textarea>
.blogPost {
font-size: 100%;
font-family: 'Roboto', sans-serif;
color: #333;
height: 5em;
width: 100%;
}
.wordCount {
font-size: 100%;
font-family: 'Roboto', sans-serif;
color: #333;
}
class EventObserver {
constructor() {
this.observers = [];
}
subscribe(fn) {
this.observers.push(fn);
}
unsubscribe(fn) {
this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}
broadcast(data) {
this.observers.forEach((subscriber) => subscriber(data));
}
}
const getWordCount = (text) => text ? text.trim().split(/\s+/).length : 0;
const wordCountElement = document.createElement('p');
wordCountElement.className = 'wordCount';
wordCountElement.innerHTML = 'Word Count: <strong id="blogWordCount">0</strong>';
document.body.appendChild(wordCountElement);
const blogObserver = new EventObserver();
blogObserver.subscribe((text) => {
const blogCount = document.getElementById('blogWordCount');
blogCount.textContent = getWordCount(text);
});
const blogPost = document.getElementById('blogPost');
blogPost.addEventListener('keyup', () => blogObserver.broadcast(blogPost.value));
This Pen doesn't use any external JavaScript resources.