davidl/Character Count

## Character Count
View in browser: https://bl.ocks.org/davidl/raw/b8d4fda8abd91b19edf819ff2ac2e86b/?raw=true

## index.html

<!doctype html>
<html lang="en">
<head>
<title>Character Count</title>
<meta charset="utf-8">
<style>
html,
body,
textarea,
div {
  background: #333;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
}
.notes {
  border-bottom: 1px solid #707070;
  margin-bottom: 1rem;
  padding: 1rem 0.4rem;
}
textarea {
  height: 500px;
  line-height: 1.3;
  padding: 0.4rem;
  width: 1060px;
}
textarea::placeholder {
  font-style: italic;
}
.max-exceeded {
  color: #f00;
}
.wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1060px;
}
</style>
</head>
<body>
<div class="notes" contenteditable onfocus="requestAnimationFrame(() => selectElementContents(this))">Notes (editable)</div>
<textarea id="text" onkeyup="updateCharCount()" placeholder="Add text to view character count…"></textarea>
<div class="wrapper">
  <div id="charcount"></div>
  <label for="max">Character limit: <input type="number" id="max" name="max" min="0" value="1300" onclick="updateCharCount()" oninput="updateCharCount()"></label>
</div>
<script>
function selectElementContents(el) {
  const range = document.createRange();
  range.selectNodeContents(el);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

function updateCharCount() {
  const elm = document.getElementById('charcount');
  const lng = document.getElementById('text').value.length;
  const max = document.getElementById('max').value;
  if (max) {
    const diff = Math.abs(max - lng);
    const over = lng > max;
    elm.innerHTML = `${lng} of ${max} characters <i>(${diff} character${diff !== 1 ? 's' : ''} ${over ? 'over' : 'remaining'})</i>`;
    elm.classList.toggle('max-exceeded', over);
  } else {
    elm.innerHTML = `${lng} characters`;
  }
}
</script>
</body>
</html>

	<!doctype html>
	<html lang="en">
	<head>
	<title>Character Count</title>
	<meta charset="utf-8">
	<style>
	html,
	body,
	textarea,
	div {
	background: #333;
	color: #fff;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-size: 1.1rem;
	-webkit-font-smoothing: antialiased;
	}
	.notes {
	border-bottom: 1px solid #707070;
	margin-bottom: 1rem;
	padding: 1rem 0.4rem;
	}
	textarea {
	height: 500px;
	line-height: 1.3;
	padding: 0.4rem;
	width: 1060px;
	}
	textarea::placeholder {
	font-style: italic;
	}
	.max-exceeded {
	color: #f00;
	}
	.wrapper {
	display: flex;
	justify-content: space-between;
	max-width: 1060px;
	}
	</style>
	</head>
	<body>
	<div class="notes" contenteditable onfocus="requestAnimationFrame(() => selectElementContents(this))">Notes (editable)</div>
	<textarea id="text" onkeyup="updateCharCount()" placeholder="Add text to view character count…"></textarea>
	<div class="wrapper">
	<div id="charcount"></div>
	<label for="max">Character limit: <input type="number" id="max" name="max" min="0" value="1300" onclick="updateCharCount()" oninput="updateCharCount()"></label>
	</div>
	<script>
	function selectElementContents(el) {
	const range = document.createRange();
	range.selectNodeContents(el);
	const sel = window.getSelection();
	sel.removeAllRanges();
	sel.addRange(range);
	}

	function updateCharCount() {
	const elm = document.getElementById('charcount');
	const lng = document.getElementById('text').value.length;
	const max = document.getElementById('max').value;
	if (max) {
	const diff = Math.abs(max - lng);
	const over = lng > max;
	elm.innerHTML = `${lng} of ${max} characters <i>(${diff} character${diff !== 1 ? 's' : ''} ${over ? 'over' : 'remaining'})</i>`;
	elm.classList.toggle('max-exceeded', over);
	} else {
	elm.innerHTML = `${lng} characters`;
	}
	}
	</script>
	</body>
	</html>