andrea/leanwebclub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

My solution for 'Character and Word Count'

Browse source
This commit is contained in:
Andrea Fazzi 2024-07-30 15:20:52 +02:00
parent 23adb32b98
commit 1262186d76
4 changed files with 44 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
js-essentials/character-word-count/README.md Normal file
View file

@ -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/

21
js-essentials/character-word-count/index.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<title>Character count</title>
</head>
<body>
<h1>Character and Word Count</h1>
<label for="text">Enter your text below.</label>
<textarea id="text"></textarea>
<p>You've written <strong><span id="word-count">0</span>
words</strong> and <strong><span id="character-count">0</span>
characters</strong>.</p>
<script src="script.js"></script>
</body>
</html>

13
js-essentials/character-word-count/script.js Normal file
View file

@ -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;
});

1
js-essentials/main.go
View file

@ -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-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 /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-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...") log.Println("Start the web server...")
err := http.ListenAndServe(":8080", mux) err := http.ListenAndServe(":8080", mux)