diff --git a/editor/index.html b/editor/index.html index 4635a06..f7c569b 100644 --- a/editor/index.html +++ b/editor/index.html @@ -37,6 +37,12 @@
Word count
+
+ 🔥😱🔥 +
+
+ 🌟😇🌟 +
diff --git a/editor/script.js b/editor/script.js index f715ffc..14c80bf 100644 --- a/editor/script.js +++ b/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 ? `${wordCount}` : 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; diff --git a/style.css b/style.css index 00a811c..07af233 100644 --- a/style.css +++ b/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; +}