Add behavior on 🥱 click

diff --git a/index.html b/index.html
index b1d84b1cd515178c76e6c2a99d1864789cdb3f4f..dc4bbe69c46c62d88df8fd766391bc9dcac4a0fe 100644 (file)
--- a/index.html
+++ b/index.html
@@ -71,7 +71,7 @@
     </table>
   </main>
 
-  <div class="yawn">🥱</div>
+  <div tabindex="0" class="yawn">🥱</div>
 
   <script type="module" src="/script.js"></script>
 </body>

diff --git a/script.js b/script.js
index bfb33d27cf754ae24b6c433a5c605997fe035425..f1181be7c5241405184ca60cb676b584b701ef55 100644 (file)
--- a/script.js
+++ b/script.js
@@ -32,3 +32,7 @@ globalThis.functions = function functions() {
     'sleepy.sum(number[])': 'Sleepily sum together an array of numbers.'
   });
 }
+
+document.querySelector('div.yawn').addEventListener('click', e => {
+  console.log('👏 You found an easter egg!');
+});

diff --git a/style.css b/style.css
index e17985a987db6273366c3995ba56188728252554..ce360dcb79636a9e35059881596b2885d069003f 100644 (file)
--- a/style.css
+++ b/style.css
@@ -119,4 +119,18 @@ abbr:has(kbd) {
 .yawn:focus-within {
   opacity: 65%;
   transition: opacity 200ms;
+}
+
+@keyframes throb {
+  50% {
+    transform: scale(1.3);
+  }
+}
+
+.yawn:focus {
+  animation: throb 1s;
+}
+
+.yawn:active {
+  animation: none;
 }
\ No newline at end of file