From 0d5a169bc4a47c96a1c9cd8748cf39ae7b1bf121 Mon Sep 17 00:00:00 2001
From: Rehan Butt <naher94@users.noreply.github.com>
Date: Sat, 10 Feb 2024 15:37:36 -0800
Subject: [PATCH] Checkbox Easter Egg Added

Closes #557
---
 _sass/about.scss | 16 ++++++++++++++++
 about.md         |  6 ++++--
 js/app.js        | 11 ++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/_sass/about.scss b/_sass/about.scss
index 554a2a47..0a583fd0 100644
--- a/_sass/about.scss
+++ b/_sass/about.scss
@@ -65,6 +65,22 @@
             border-radius: 4px;
             margin-right: 0.5em;
             text-decoration: none;
+            position: relative;
+            .click-easter-egg{
+              background-color: $navy-black; //TODO make semantic
+              box-shadow: $recessed-shadow semantic-color(shadow);
+              color: $pure-white;
+              border-radius: $tile-radius;
+              padding: 0.25em 0.5em;
+              transform: rotate(-5deg);
+              width: 9em;
+              line-height: 1.2;
+              opacity: 0;
+              position: absolute;
+              left: 150%;
+              top: -200%;
+              transition: $sprint;
+            }
           }
           @include breakpoint(small only) {
             font-size: 1.2rem;
diff --git a/about.md b/about.md
index 423225d8..0af9973e 100644
--- a/about.md
+++ b/about.md
@@ -18,12 +18,14 @@ footer-main: true
           <p>One day I'd like to:</p>
           <ul class="todos">
             <li>
-              <div class="checkbox">
+              <div class="checkbox" onclick="easterEggMessage(this)">
+                <div class="click-easter-egg">Ha! If only it was that easy 😊</div>
               </div>
               <span>publish a photo book</span>
             </li>
             <li>
-              <div class="checkbox">
+              <div class="checkbox" onclick="easterEggMessage(this)">
+                <div class="click-easter-egg">Ha! If only it was that easy 😊</div>
               </div>
               <span>design and ship a hardware product</span>
             </li>
diff --git a/js/app.js b/js/app.js
index 129a9037..1d2bb0b6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -242,4 +242,13 @@ function copyToClipboard(link,clickedItem) {
     return;
 	}
   return Promise.reject('The Clipboard API is not available.');
-}
\ No newline at end of file
+}
+///////////////////////////////////////////// End of Copy to Clipboard
+
+///////////////////////////////////////////// Start of Checkbox Easter Egg Message on About Page
+function easterEggMessage(clickedItem){
+	console.log("children",clickedItem.children);
+	clickedItem.children[0].style.opacity = '1';
+	setTimeout(function(){clickedItem.children[0].style.opacity = '0';}, 1500);
+}
+///////////////////////////////////////////// End of Checkbox Easter Egg Message on About Page
\ No newline at end of file