colabottles/index.html

## index.html
<!DOCTYPE html>
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>VanillaJS Day 7: Project 3 Character Count</title>
<style id="jsbin-css">
* {
  box-sizing: border-box;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

body {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: max-content;
}

form {
  background: aliceblue;
  grid-column: 2;
  justify-self: center;
}

fieldset, legend, textarea {
  font-family: inherit;
  font-size: 100%;
  border: 1px solid black;
  padding: 0 1rem;
  border-radius: 5px;
}

textarea {
   display: flex;
   flex-direction: column;
}

textarea:focus {
  background: rgba(0,0,0,.1);
  border-radius: 5px;
}

legend {
   font-weight: 900;
}

p {
  color: green;
}

span#character-count {
  color: red;
}
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>VanillaJS Academy Day 7, Project: Character Count</legend>
        <label for="text">Enter your text below.</label>
        <textarea id="text"></textarea>

      <p>You've written <strong><span id="character-count">0</span> characters</strong>.</p>
    </fieldset>
  </form>
<script id="jsbin-javascript">
// Get the text area and character count
  const textArea = document.querySelector("#text");
  const charCount = document.querySelector("#character-count");

// Get the length of what is typed in the textarea
  function getCharCount(element) {
    return element.value.length;
  }

// Update the number of chars in the textarea
  function updateCharCount(display, count) {
    display.textContent = getCharCount(count);
  }

// Update the number of chars written as they are typed
  textArea.addEventListener("input", function() {
    updateCharCount(charCount, textArea);
  }, false);
</script>


<script id="jsbin-source-css" type="text/css">* {
  box-sizing: border-box;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

body {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: max-content;
}

form {
  background: aliceblue;
  grid-column: 2;
  justify-self: center;
}

fieldset, legend, textarea {
  font-family: inherit;
  font-size: 100%;
  border: 1px solid black;
  padding: 0 1rem;
  border-radius: 5px;
}

textarea {
   display: flex;
   flex-direction: column;
}

textarea:focus {
  background: rgba(0,0,0,.1);
  border-radius: 5px;
}

legend {
   font-weight: 900;
}

p {
  color: green;
}

span#character-count {
  color: red;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">// Get the text area and character count
  const textArea = document.querySelector("#text");
  const charCount = document.querySelector("#character-count");

// Get the length of what is typed in the textarea
  function getCharCount(element) {
    return element.value.length;
  }

// Update the number of chars in the textarea
  function updateCharCount(display, count) {
    display.textContent = getCharCount(count);
  }

// Update the number of chars written as they are typed
  textArea.addEventListener("input", function() {
    updateCharCount(charCount, textArea);
  }, false);</script></body>
</html>

## jsbin.cigenaf.css
* {
  box-sizing: border-box;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

body {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: max-content;
}

form {
  background: aliceblue;
  grid-column: 2;
  justify-self: center;
}

fieldset, legend, textarea {
  font-family: inherit;
  font-size: 100%;
  border: 1px solid black;
  padding: 0 1rem;
  border-radius: 5px;
}

textarea {
   display: flex;
   flex-direction: column;
}

textarea:focus {
  background: rgba(0,0,0,.1);
  border-radius: 5px;
}

legend {
   font-weight: 900;
}

p {
  color: green;
}

span#character-count {
  color: red;
}

## jsbin.cigenaf.js
// Get the text area and character count
  const textArea = document.querySelector("#text");
  const charCount = document.querySelector("#character-count");

// Get the length of what is typed in the textarea
  function getCharCount(element) {
    return element.value.length;
  }

// Update the number of chars in the textarea
  function updateCharCount(display, count) {
    display.textContent = getCharCount(count);
  }

// Update the number of chars written as they are typed
  textArea.addEventListener("input", function() {
    updateCharCount(charCount, textArea);
  }, false);
	<!DOCTYPE html>
	<html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>VanillaJS Day 7: Project 3 Character Count</title>
	<style id="jsbin-css">
	* {
	box-sizing: border-box;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	line-height: 1.5;
	}

	body {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: max-content;
	}

	form {
	background: aliceblue;
	grid-column: 2;
	justify-self: center;
	}

	fieldset, legend, textarea {
	font-family: inherit;
	font-size: 100%;
	border: 1px solid black;
	padding: 0 1rem;
	border-radius: 5px;
	}

	textarea {
	display: flex;
	flex-direction: column;
	}

	textarea:focus {
	background: rgba(0,0,0,.1);
	border-radius: 5px;
	}

	legend {
	font-weight: 900;
	}

	p {
	color: green;
	}

	span#character-count {
	color: red;
	}
	</style>
	</head>
	<body>
	<form>
	<fieldset>
	<legend>VanillaJS Academy Day 7, Project: Character Count</legend>
	<label for="text">Enter your text below.</label>
	<textarea id="text"></textarea>

	<p>You've written <strong><span id="character-count">0</span> characters</strong>.</p>
	</fieldset>
	</form>
	<script id="jsbin-javascript">
	// Get the text area and character count
	const textArea = document.querySelector("#text");
	const charCount = document.querySelector("#character-count");

	// Get the length of what is typed in the textarea
	function getCharCount(element) {
	return element.value.length;
	}

	// Update the number of chars in the textarea
	function updateCharCount(display, count) {
	display.textContent = getCharCount(count);
	}

	// Update the number of chars written as they are typed
	textArea.addEventListener("input", function() {
	updateCharCount(charCount, textArea);
	}, false);
	</script>


	<script id="jsbin-source-css" type="text/css">* {
	box-sizing: border-box;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	line-height: 1.5;
	}

	body {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: max-content;
	}

	form {
	background: aliceblue;
	grid-column: 2;
	justify-self: center;
	}

	fieldset, legend, textarea {
	font-family: inherit;
	font-size: 100%;
	border: 1px solid black;
	padding: 0 1rem;
	border-radius: 5px;
	}

	textarea {
	display: flex;
	flex-direction: column;
	}

	textarea:focus {
	background: rgba(0,0,0,.1);
	border-radius: 5px;
	}

	legend {
	font-weight: 900;
	}

	p {
	color: green;
	}

	span#character-count {
	color: red;
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">// Get the text area and character count
	const textArea = document.querySelector("#text");
	const charCount = document.querySelector("#character-count");

	// Get the length of what is typed in the textarea
	function getCharCount(element) {
	return element.value.length;
	}

	// Update the number of chars in the textarea
	function updateCharCount(display, count) {
	display.textContent = getCharCount(count);
	}

	// Update the number of chars written as they are typed
	textArea.addEventListener("input", function() {
	updateCharCount(charCount, textArea);
	}, false);</script></body>
	</html>