Add word-count jazz

editor/index.html

@@ -37,6 +37,12 @@
 				<div class="count">
 					<div class="detail-title">Word count</div>
 					<div id="word-count"></div>
+					<div id="uh-oh">
+						<span class="left">🔥</span>😱<span class="right">🔥</span>
+					</div>
+					<div id="hooray">
+						<span class="left">🌟</span>😇<span class="right">🌟</span>
+					</div>
 				</div>
 				<div class="word-list" id="word-list">
 					<div class="detail-header">

editor/script.js

@@ -4,6 +4,9 @@ const jargonNode = document.getElementById('jargon');
 const wordCountNode = document.getElementById('word-count');
 const allwordsNode = document.getElementById('allwords');
 const wordListNode = document.getElementById('word-list');
+const uhohNode = document.getElementById('uh-oh');
+const hoorayNode = document.getElementById('hooray');
+let previousWordCount = null;
 
 const parseWords = () => {
 	const jargonList = document.createElement('ul');
@@ -17,6 +20,19 @@ const parseWords = () => {
 		.filter((word) => word.length);
 	const wordCount = inputWords.length;
 	wordCountNode.innerHTML = wordCount > 211 ? `<span>${wordCount}</span>` : wordCount;
+	if (previousWordCount !== null && previousWordCount < 212 && wordCount >= 212) {
+		uhohNode.className = 'active';
+		setTimeout(() => {
+			uhohNode.className = '';
+		}, 2000);
+	}
+	if (previousWordCount !== null && previousWordCount >= 212 && wordCount < 212) {
+		hoorayNode.className = 'active';
+		setTimeout(() => {
+			hoorayNode.className = '';
+		}, 2000);
+	}
+	previousWordCount = wordCount;
 	const seenWords = {};
 	let hasInvalidWords = false;
 	inputWords
@@ -38,7 +54,7 @@ const parseWords = () => {
 			const wordNode = document.createElement('li');
 			const textnode = document.createElement('div');
 			textnode.innerHTML = word;
-			textnode.className = "text";
+			textnode.className = 'text';
 			const isValid = wordObject && wordObject.rank <= 2048;
 			if (!isValid) {
 				hasInvalidWords = true;

style.css

@@ -169,6 +169,7 @@ span {
 .count {
 	display: flex;
 	justify-content: space-between;
+	position: relative;
 }
 .shadow {
 	opacity: 0.5;
@@ -218,3 +219,34 @@ li span {
 		}
 	}
 }
+
+#uh-oh,
+#hooray {
+	font-size: 5em;
+	position: absolute;
+	bottom: -44px;
+	right: -106px;
+	transform: scale(0);
+	opacity: 1;
+	z-index: -1;
+	.left {
+		position: relative;
+		left: 0.5em;
+		transform: rotate(-30deg);
+		display: inline-block;
+		z-index: -1;
+	}
+	.right {
+		position: relative;
+		right: 0.5em;
+		transform: rotate(30deg);
+		display: inline-block;
+		z-index: -1;
+	}
+}
+#uh-oh.active,
+#hooray.active {
+	transform: scale(1) translateY(-100px);
+	opacity: 0;
+	transition: transform 2s ease-out, opacity 1.5s 0.5s linear;
+}