Skip to content

Instantly share code, notes, and snippets.

@colabottles

colabottles/index.html

Created January 15, 2020 07:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save colabottles/43efe201da42b4e115ccd3331302af0c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save colabottles/43efe201da42b4e115ccd3331302af0c to your computer and use it in GitHub Desktop.
Download ZIP
VanillaJS Day 9: Project 4: Character and Word Counts // source https://jsbin.com/cebecex
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>VanillaJS Day 9: Project 4: Character and Word Counts</title>
<style id="jsbin-css">
* {
box-sizing: border-box;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
body {
min-height: 10vh;
display: grid;
justify-items: center;
}
form {
display: flex;
flex-wrap: wrap;
align-self: center;
}
fieldset, legend, textarea {
font-family: inherit;
font-size: 100%;
border: 1px solid black;
padding: 0 1rem;
border-radius: 5px;
background: aliceblue;
}
fieldset {
padding: 1rem;
}
textarea {
display: flex;
min-width: 100%;
padding: 0.5rem;
}
textarea:focus {
background: rgba(0,0,0,.1);
border-radius: 5px;
}
legend {
font-weight: 900;
}
p {
color: green;
}
span#character-count,
span#word-count{
color: red;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>VanillaJS Academy Day 9, Project: Character and Word Count</legend>
<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>
</fieldset>
</form>
<script id="jsbin-javascript">
// Get the textarea, word, and character count
var textArea = document.querySelector('#text');
var wordCount = document.querySelector('#word-count');
var charCount = document.querySelector('#character-count');
// Get the length of what is typed in the textarea
function count(el, countChars) {
// Get the count and trim whitespace
var count = countChars ? el.value.length : el.value.trim();
// Matches any whitespace token & >=1 of the proceeding token
if (!countChars) count = count.split(/\s+/).length;
// Return the count, of course
return count;
}
// Update the number of chars in the textarea
function updateCounts() {
wordCount.textContent = count(this, false);
charCount.textContent = count(this, true);
}
// Update the number of chars written as they are typed
textArea.addEventListener('input', updateCounts, true);
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
body {
min-height: 10vh;
display: grid;
justify-items: center;
}
form {
display: flex;
flex-wrap: wrap;
align-self: center;
}
fieldset, legend, textarea {
font-family: inherit;
font-size: 100%;
border: 1px solid black;
padding: 0 1rem;
border-radius: 5px;
background: aliceblue;
}
fieldset {
padding: 1rem;
}
textarea {
display: flex;
min-width: 100%;
padding: 0.5rem;
}
textarea:focus {
background: rgba(0,0,0,.1);
border-radius: 5px;
}
legend {
font-weight: 900;
}
p {
color: green;
}
span#character-count,
span#word-count{
color: red;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Get the textarea, word, and character count
var textArea = document.querySelector('#text');
var wordCount = document.querySelector('#word-count');
var charCount = document.querySelector('#character-count');
// Get the length of what is typed in the textarea
function count(el, countChars) {
// Get the count and trim whitespace
var count = countChars ? el.value.length : el.value.trim();
// Matches any whitespace token & >=1 of the proceeding token
if (!countChars) count = count.split(/\s+/).length;
// Return the count, of course
return count;
}
// Update the number of chars in the textarea
function updateCounts() {
wordCount.textContent = count(this, false);
charCount.textContent = count(this, true);
}
// Update the number of chars written as they are typed
textArea.addEventListener('input', updateCounts, true);</script></body>
</html>
Raw
jsbin.cebecex.css
* {
box-sizing: border-box;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
body {
min-height: 10vh;
display: grid;
justify-items: center;
}
form {
display: flex;
flex-wrap: wrap;
align-self: center;
}
fieldset, legend, textarea {
font-family: inherit;
font-size: 100%;
border: 1px solid black;
padding: 0 1rem;
border-radius: 5px;
background: aliceblue;
}
fieldset {
padding: 1rem;
}
textarea {
display: flex;
min-width: 100%;
padding: 0.5rem;
}
textarea:focus {
background: rgba(0,0,0,.1);
border-radius: 5px;
}
legend {
font-weight: 900;
}
p {
color: green;
}
span#character-count,
span#word-count{
color: red;
}
Raw
jsbin.cebecex.js
// Get the textarea, word, and character count
var textArea = document.querySelector('#text');
var wordCount = document.querySelector('#word-count');
var charCount = document.querySelector('#character-count');
// Get the length of what is typed in the textarea
function count(el, countChars) {
// Get the count and trim whitespace
var count = countChars ? el.value.length : el.value.trim();
// Matches any whitespace token & >=1 of the proceeding token
if (!countChars) count = count.split(/\s+/).length;
// Return the count, of course
return count;
}
// Update the number of chars in the textarea
function updateCounts() {
wordCount.textContent = count(this, false);
charCount.textContent = count(this, true);
}
// Update the number of chars written as they are typed
textArea.addEventListener('input', updateCounts, true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment