easy email copy

Nospoko · Sep 27, 2023 · 3b2452a · 3b2452a
1 parent 87e7306
commit 3b2452a
Showing 1 changed file with 60 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -61,29 +61,79 @@
         #gifClicker {
             cursor: default;
         }
+
+        #copyMessage {
+            display: none;
+            position: absolute;
+            bottom: 100%; /* This will position it right above the emailContainer */
+            left: 50%;
+            transform: translateX(-50%); /* This centers the message horizontally relative to emailContainer */
+            background: teal;
+            color: #C0C0C0;
+            padding: 5px 5px;
+            border-radius: 5px;
+            margin-bottom: 10px; /* Some space between the message and the emailContainer */
+            transition: opacity 0.5s ease-out;
+            opacity: 0;
+            z-index: 10;
+        }
     </style>
 </head>
 
 <body>
     <div class="container">
         <h1>Hang in there, algorithms are coming</h1>
-        <a href="javascript:void(0);" id="gifClicker">
-            <img src="assets/double-p.gif" alt="Under Construction">
-        </a>
+        <img src="assets/double-p.gif" alt="Under Construction">
     </div>
     <div id="emailContainer">
+        <div id="copyMessage">
+            copied!
+        </div>
         <p>[email protected]</p>
     </div>
     <script>
-        document.getElementById('gifClicker').addEventListener('click', function() {
-            var emailContainer = document.getElementById('emailContainer');
-
-            if(emailContainer.classList.contains('visible')) {
-                emailContainer.classList.remove('visible');
-            } else {
-                emailContainer.classList.add('visible');
+        var emailContainer = document.getElementById('emailContainer');
+        document.body.addEventListener('click', function(event) {
+            // Check if the clicked element is not the emailContainer or a descendant of it
+            if (!emailContainer.contains(event.target)) {
+                if (emailContainer.classList.contains('visible')) {
+                    emailContainer.classList.remove('visible');
+                } else {
+                    emailContainer.classList.add('visible');
+                }
             }
         });
+
+        // Event listener for copying the email to the clipboard when emailContainer is clicked
+        emailContainer.addEventListener('click', function(event) {
+            // Prevent the event from propagating to the body
+            event.stopPropagation();
+
+            // Copy the email to clipboard
+            var emailText = emailContainer.querySelector('p').innerText;
+            var textArea = document.createElement('textarea');
+            textArea.value = emailText;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+
+            // Show copy message
+            var copyMessage = document.getElementById('copyMessage');
+            copyMessage.style.display = 'block';
+            copyMessage.style.opacity = '1';
+
+            // Hide the message after 2 seconds
+            setTimeout(function() {
+                copyMessage.style.opacity = '0';
+
+                // Remove it from the layout after the fade-out transition is done
+                setTimeout(function() {
+                    copyMessage.style.display = 'none';
+                }, 500); // This 500ms should match the transition duration in the CSS
+
+            }, 2000); // The message will be visible for 2 seconds
+        });
     </script>
 </body>
 </html>