Last active
January 23, 2022 17:22
-
-
Save mosherbrian/56ab8b0fead78f748771832b0acc7ac0 to your computer and use it in GitHub Desktop.
Week 2 - Wednesday Project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Character & Word Count</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
label { | |
display: block; | |
width: 100%; | |
} | |
textarea { | |
min-height: 24em; | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Character & Word Count</h1> | |
<label for="text">Enter your text below.</label> | |
<textarea id="text"></textarea> | |
<p id="count" "aria-live="polite">You've written 0 words and 0 characters.</p> | |
<script> | |
'use strict'; | |
// Get the elements | |
let text = document.querySelector('#text'); | |
let count = document.querySelector('#count'); | |
// Listen for changes to the text area content | |
text.addEventListener('input', function () { | |
let charCount = text.value.length; | |
let wordCount = text.value.split(/[\s]+/g).filter( item => item !== '').length; | |
count.textContent = "You've written " + wordCount + " words and " + charCount + " characters."; | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment