Checkbox Easter Egg Added

Closes #557
naher94 · Feb 10, 2024 · 0d5a169 · 0d5a169
1 parent 4e5c131
commit 0d5a169
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git 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
@@ -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
@@ -242,4 +242,13 @@ function copyToClipboard(link,clickedItem) {
     return;
 	}
   return Promise.reject('The Clipboard API is not available.');
-}
+}
+///////////////////////////////////////////// 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