clipboard copied 🎄

Author: Abhiramborige

dist/Responses/newscript.js

@@ -1,11 +1,11 @@
-require("dotenv").config();
-const ShortenerURL = process.env.HOME_URL;
+const ShortenerURL = "https://creative-greets.netlify.app/.netlify/functions/server/";
 
 // https://stackoverflow.com/questions/6396101/pure-javascript-send-post-data-without-a-form
 // Backend code was taken from "WebDevSimplified" !
 function get_short_url() {
     let data = { "fullUrl":`${window.location.href}&shared=True` };
-
+    var span_popup=document.querySelector(".popuptext");
+    span_popup.classList.remove("show");
     fetch(`${ShortenerURL}shortUrls`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -14,7 +14,9 @@ function get_short_url() {
         return res.json();
     }).then(response=>{
         console.log(ShortenerURL+response.url)
-        return ShortenerURL+response.url
+        let shortURL=ShortenerURL+response.url;
+        span_popup.classList.add("show");
+        navigator.clipboard.writeText(shortURL);
     })
     .catch(err=>{
         return err;

dist/Responses/script.js

@@ -26,10 +26,19 @@ console.log(queryDict2);
 // check if the rendered page is shared by others or created to share
 if(!(d1=="shared" && d2=="True")){
     let button_div=document.querySelector(".bclass");
-    // <button onclick="get_short_url()">Share with friends !</button>
+    /* 
+    <button onclick="get_short_url()" class="share_btn">Share with friends ! 
+        <span class="popuptext">Sharable URL Copied !</span>
+    </button>
+    */
     var button=document.createElement("button")
     button.setAttribute("onclick","get_short_url()");
+    button.setAttribute("class","share_btn");
     button.appendChild(document.createTextNode("Share with Friends !"));
+    var span_popup=document.createElement("span");
+    span_popup.setAttribute("class","popuptext");
+    span_popup.appendChild(document.createTextNode("Shareble URL Copied !"));
+    button.appendChild(span_popup);
     button_div.appendChild(button);
 }
 
@@ -156,7 +165,6 @@ for(i=0; i<queryDict1.length; i++){
 }
 var replaced=queryDict2[i][0].split('+').join(' ');
 var replaced="<h1>"+replaced+"</h1>";
-console.log("Replaced"+replaced);
 // code for not to apply styling to the emojis to maintain the original color
 if(replaced.search(regexExp)!=-1){
     const found=replaced.match(regexExp); // returns array of all matches of emoji
@@ -170,7 +178,6 @@ if(replaced.search(regexExp)!=-1){
         }
     }
 }
-console.log(replaced);
 message.innerHTML=replaced
 greet.innerHTML="From: "+queryDict2[i-1][0].split('+').join(' ');
 // "<br>To: "+queryDict2[i-1][0];

dist/Responses/style.css

@@ -257,3 +257,55 @@ p{
         opacity:0;
     }
 }
+
+
+/*  */
+.share_btn {
+    cursor: pointer;
+    user-select: none;
+}
+  /* The actual popup */
+.share_btn .popuptext {
+    visibility: hidden;
+    width: 160px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 25%;
+    left: 50%;
+    margin-left: -80px;
+}
+  
+/* Popup arrow */
+.share_btn .popuptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+  
+/* Toggle this class - hide and show the popup */
+.share_btn .show {
+    visibility: visible;
+    animation: fadeIn 2s;
+    animation-fill-mode: forwards;
+}
+
+/* Add animation (fade in the popup) */
+@keyframes fadeIn {
+    0%  {opacity: 0;}
+    20% {opacity: 1;}
+    80% {opacity: 1;}
+    100% {
+        opacity: 0; 
+        visibility: hidden;
+    }
+}