feat: day 88

solygambas · solygambas · commit 80ae9a7b12ac · 2025-07-28T17:16:54.000+02:00
diff --git a/088-promo code/index.html b/088-promo code/index.html
@@ -10,20 +10,22 @@
     <title>Promo Code</title>
   </head>
   <body>
-    <div class="present" id="present">
+    <!-- Make it Accessible on Focus -->
+    <div class="present" id="present" tabindex="0">
       <div class="lid">
         <span></span>
       </div>
       <div class="promo">
         <p>20% off promo</p>
-        <h2>ILOVEYOU</h2>
+        <!-- Add a "Copy to Clipboard" Button -->
+        <h2>ILOVEYOU <button id="copy-btn" type="button">Copy</button></h2>
       </div>
       <div class="box">
         <span></span>
         <span></span>
       </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/088-promo code/script.js b/088-promo code/script.js
@@ -1,5 +1,12 @@
 const present = document.getElementById("present");
+const copyBtn = document.getElementById("copy-btn");
+
+// Customize Confetti Animation
 const options = {
+  particleCount: 200,
+  spread: 90,
+  gravity: 0.8,
+  shapes: ["star"],
   colors: [
     "#34D963",
     "#068C2C",
@@ -11,9 +18,38 @@ const options = {
   ],
 };
 
-present.addEventListener("mouseenter", () => {
-  confetti(options);
+// present.addEventListener("mouseenter", () => {
+//   confetti(options);
+// });
+// present.addEventListener("touchstart", () => {
+//   confetti(options);
+// });
+
+// Toggle Animation on Click
+present.addEventListener("click", () => {
+  const isOpening = !present.classList.contains("open");
+  present.classList.toggle("open");
+  if (isOpening) {
+    confetti(options);
+  }
 });
-present.addEventListener("touchstart", () => {
-  confetti(options);
+
+present.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    present.click();
+  }
+});
+
+// Add a "Copy to Clipboard" Button
+copyBtn.addEventListener("click", (e) => {
+  e.stopPropagation();
+  const promoCode = copyBtn.parentElement.firstChild.textContent.trim();
+  navigator.clipboard.writeText(promoCode).then(() => {
+    const originalText = copyBtn.textContent;
+    copyBtn.textContent = "Copied!";
+    setTimeout(() => {
+      copyBtn.textContent = originalText;
+    }, 1500);
+  });
 });
diff --git a/088-promo code/style.css b/088-promo code/style.css
@@ -5,8 +5,8 @@
 }
 
 body {
-  background: #232526; 
-  background: linear-gradient(to top,   #414345, #232526); 
+  background: #232526;
+  background: linear-gradient(to top, #414345, #232526);
   font-family: "Itim", cursive;
   min-height: 100vh;
   margin: 0;
@@ -87,17 +87,57 @@ body {
   margin: 0;
 }
 
+/* Add a "Copy to Clipboard" Button */
 .promo h2 {
   font-size: 40px;
   margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.promo button {
+  background: #50514f;
+  color: #fff;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: bold;
+  border: none;
+  border-radius: 10px;
+  padding: 6px 18px;
+  margin: 0;
+  min-width: 100px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.promo button:hover,
+.promo button:focus {
+  background: #2c4251;
+  outline: none;
+}
+
+/* Make it Accessible on Focus */
+/* .present:hover .lid,
+.present:focus-within .lid {
+  top: -100px;
+  transform: rotateZ(10deg);
+  left: 10px;
 }
 
-.present:hover .lid {
+.present:hover .promo,
+.present:focus-within .promo {
+  top: -80px;
+} */
+
+.present.open .lid {
   top: -100px;
   transform: rotateZ(10deg);
   left: 10px;
 }
 
-.present:hover .promo {
+/* Toggle Animation on Click */
+.present.open .promo {
   top: -80px;
 }
