From 08486cec5eca43d2354c462c470ffeb9e69b70b0 Mon Sep 17 00:00:00 2001 From: Andrea Fazzi Date: Mon, 5 Aug 2024 15:52:57 +0200 Subject: [PATCH] Add "Announcing count" project --- js-essentials/announcing-count/README.md | 9 +++++++++ js-essentials/announcing-count/index.html | 21 +++++++++++++++++++++ js-essentials/announcing-count/script.js | 13 +++++++++++++ 3 files changed, 43 insertions(+) create mode 100644 js-essentials/announcing-count/README.md create mode 100644 js-essentials/announcing-count/index.html create mode 100644 js-essentials/announcing-count/script.js diff --git a/js-essentials/announcing-count/README.md b/js-essentials/announcing-count/README.md new file mode 100644 index 0000000..8e2dfb1 --- /dev/null +++ b/js-essentials/announcing-count/README.md @@ -0,0 +1,9 @@ +# Character count + +Display the number of characters a user has typed into a textarea +element in real time as they type. + +# Reference + +* https://leanwebclub.com/learn/js-essentials/project-character-count/ + diff --git a/js-essentials/announcing-count/index.html b/js-essentials/announcing-count/index.html new file mode 100644 index 0000000..e9da289 --- /dev/null +++ b/js-essentials/announcing-count/index.html @@ -0,0 +1,21 @@ + + + + + + + Character count + + +

Character and Word Count

+ + + + +

You've written 0 + words and 0 + characters.

+ + + + diff --git a/js-essentials/announcing-count/script.js b/js-essentials/announcing-count/script.js new file mode 100644 index 0000000..763302e --- /dev/null +++ b/js-essentials/announcing-count/script.js @@ -0,0 +1,13 @@ +let charCounter = document.querySelector("#character-count"); +let wordCounter = document.querySelector("#word-count"); +let textarea = document.querySelector('#text'); + +textarea.addEventListener('input', function (event) { + let content = event.target.value; + + charCounter.innerText = content.length; + wordCounter.innerText = content.split(/[\s]+/g).filter(function (word) { + return word.length; + }).length; +}); +