Confirmation popup

src/code/index.html

@@ -26,6 +26,9 @@ <h1>SocialRepo</h1>
         <section id="home">
             <ul id="socialLinks">
             </ul>
+            <div id="copyConfirm" class="copy-confirm">
+                <span class="copy-text"></span>
+            </div>
         </section>
         <section id="info" class="hidden">
             <div id="heading">

src/code/index.js

@@ -78,6 +78,15 @@ const socialLinks = getSocialLinks();
 // ============== Home ==============
 function showCopyMessage(key) {
     console.log(`Copied ${key} to clipboard!`);
+    const copyConfirm = document.getElementById('copyConfirm');
+const copyText = copyConfirm.querySelector('.copy-text');
+copyText.textContent = `✅${key} profile copied.`;
+copyConfirm.style.display = 'flex';
+
+setTimeout(() => {
+    copyConfirm.style.display = 'none';
+}, 3000);
+
 };
 
 function createImage(key) {
@@ -91,8 +100,26 @@ function createImage(key) {
 const socialLinksContainer = document.getElementById("socialLinks");
 function createSocialLink(key, value) {
     const li = document.createElement("li");
+    // Here this will be a div which will come over the top of the icon and it will show the name of the app 
+    const div = document.createElement("div")
     const img = createImage(key);
+    div.classList.add('div-hover-effect')
+    //^ making the string short if it overflows (based upon its length)
+    if (key.length>8){
+        div.textContent = `${key.substr(0,8)+"..."}`
+    }else{
+        div.textContent = key
+    }
+    li.addEventListener("mouseenter",()=>{
+        img.style.display = 'none'
+        div.style.display = 'flex'
+    })
+    li.addEventListener('mouseleave',()=>{
+        img.style.display = 'block'
+        div.style.display = 'none'
+    })
     img.onload = () => {
+        li.appendChild(div)
         li.appendChild(img);
         li.addEventListener("click", () => {
             navigator.clipboard.writeText(value); // Copy the value to clipboard

src/code/style.css

@@ -6,21 +6,21 @@
     box-sizing: border-box;
     /* font-family: "Source Sans 3", sans-serif; */
     font-family: "Raleway", sans-serif;
-    transition: all 300ms ease;
+    transition: all 400ms ease;
     list-style-type: none;
 }
 
 :root {
-    --primary-color: #7029ff;
-    --secondary-color: #b58fff;
-    --accent-color: #d0beff;
-    --text-color: #eeeeee;
+    --primary-color: #a47df2;
+    --secondary-color: #c3b0e8;
+    --accent-color: #ab98d8;
+    --text-color: #faf1f1;
     --text-color-2: #242327;
 }
 
 body {
-    width: 500px;
-    height: 450px;
+    width: 600px;
+    height: 600px;
     font-family: Arial, Helvetica, sans-serif;
     text-align: center;
     scroll-behavior: smooth;
@@ -77,8 +77,8 @@ nav li button {
 }
 
 nav li button:active {
-    transform: scale(0.9);
-    transition-duration: 100ms;
+    transform: scale(0.7);
+    transition-duration: 120ms;
 }
 
 #info-btn {
@@ -184,6 +184,21 @@ p {
     height: 100%;
 }
 
+.div-hover-effect{
+    /* position: absolute;
+    top: 105%; */
+    display: none;
+    justify-content: center;
+    align-items: center;
+    height: inherit;
+    width: inherit;
+    border-radius: inherit;
+    font-size: 11px;
+    font-weight: 700;
+    color: white;
+    background-color: transparent;
+    overflow: hidden;
+}
 /* ============== Info Panel ============== */
 
 #info {
@@ -312,7 +327,7 @@ table td {
 
 #images {
     display: flex;
-    gap: 1.5rem;
+    gap: 1.7rem;
 }
 
 #images img {
@@ -345,7 +360,7 @@ table td {
     font-size: 0.9rem;
     outline: none;
     border: none;
-    background-color: var(--accent-color);
+    background-color: white;
     color: var(--primary-color);
     font-weight: 600;
     text-align: center;
@@ -542,3 +557,24 @@ table td {
     transform: scale(0.9);
     transition-duration: 100ms;
 }
+
+.copy-confirm {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--primary-color);
+    color: var(--text-color);
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.copy-confirm .check {
+    font-size: 1.2rem;
+}