From 0b7f837edff911a13956c468aea229b35d76acf9 Mon Sep 17 00:00:00 2001
From: Rikhil <rikhiltaneja@gmail.com>
Date: Fri, 14 Jun 2024 15:12:11 +0530
Subject: [PATCH 1/2] added names on hover

---
 src/code/index.js  | 18 ++++++++++++++++++
 src/code/style.css | 15 +++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/code/index.js b/src/code/index.js
index eec9bc0..9ca714d 100644
--- a/src/code/index.js
+++ b/src/code/index.js
@@ -60,10 +60,12 @@ function getSocialLinks() {
             return response.json();
         })
         .then(jsonData => {
+            console.log(jsonData)
             Object.keys(jsonData).slice(1).forEach(key => {
                 socialLinks[key] = jsonData[key];
                 createSocialLink(key, jsonData[key]);
             });
+            console.log(socialLinks)
             return socialLinks;
         })
         .catch(error => {
@@ -91,8 +93,24 @@ function createImage(key) {
 const socialLinksContainer = document.getElementById("socialLinks");
 function createSocialLink(key, value) {
     const li = document.createElement("li");
+    const div = document.createElement("div")
     const img = createImage(key);
+    div.classList.add('hover-div')
+    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
diff --git a/src/code/style.css b/src/code/style.css
index 1fd6433..bdce459 100644
--- a/src/code/style.css
+++ b/src/code/style.css
@@ -183,6 +183,21 @@ p {
     width: 100%;
     height: 100%;
 }
+.hover-div{
+    /* position: absolute;
+    top: 105%; */
+    display: none;
+    justify-content: center;
+    align-items: center;
+    height: inherit;
+    width: inherit;
+    border-radius: inherit;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--accent-color);
+    background-color: transparent;
+    overflow: hidden;
+}
 
 /* ============== Info Panel ============== */
 

From e576e751d639e96a995d4b1c466e08730a687d2b Mon Sep 17 00:00:00 2001
From: Rikhil <rikhiltaneja@gmail.com>
Date: Fri, 14 Jun 2024 15:24:23 +0530
Subject: [PATCH 2/2] added comments

---
 src/code/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/code/index.js b/src/code/index.js
index 9ca714d..a3113ea 100644
--- a/src/code/index.js
+++ b/src/code/index.js
@@ -93,9 +93,11 @@ function createImage(key) {
 const socialLinksContainer = document.getElementById("socialLinks");
 function createSocialLink(key, value) {
     const li = document.createElement("li");
+    //^ New div which will contain the name of app (displayed on hover)
     const div = document.createElement("div")
     const img = createImage(key);
     div.classList.add('hover-div')
+    //^ making the string short if it overflows (based upon its length)
     if (key.length>8){
         div.textContent = `${key.substr(0,8)+"..."}`
     }else{