diff --git a/js-essentials/character-word-count/README.md b/js-essentials/character-word-count/README.md new file mode 100644 index 0000000..8e2dfb1 --- /dev/null +++ b/js-essentials/character-word-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/character-word-count/index.html b/js-essentials/character-word-count/index.html new file mode 100644 index 0000000..782266e --- /dev/null +++ b/js-essentials/character-word-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/character-word-count/script.js b/js-essentials/character-word-count/script.js new file mode 100644 index 0000000..0095104 --- /dev/null +++ b/js-essentials/character-word-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; +}); + diff --git a/js-essentials/main.go b/js-essentials/main.go index 2a8519f..7e01c45 100644 --- a/js-essentials/main.go +++ b/js-essentials/main.go @@ -13,6 +13,7 @@ func main() { mux.Handle("GET /toggle-multiple-fields/", http.StripPrefix("/toggle-multiple-fields", http.FileServer(http.Dir("toggle-multiple-fields")))) mux.Handle("GET /toggle-multiple-forms/", http.StripPrefix("/toggle-multiple-forms", http.FileServer(http.Dir("toggle-multiple-forms")))) mux.Handle("GET /character-count/", http.StripPrefix("/character-count", http.FileServer(http.Dir("character-count")))) + mux.Handle("GET /character-word-count/", http.StripPrefix("/character-word-count", http.FileServer(http.Dir("character-word-count")))) log.Println("Start the web server...") err := http.ListenAndServe(":8080", mux)