refactor code

oyepriyansh · Jun 26, 2024 · 9498057 · 9498057
1 parent 8d841f7
commit 9498057
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 59 deletions.
diff --git a/404.html b/404.html
@@ -1,19 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DevProfiles - 404 Not-Found</title> 
-    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
-</body>
-    <div class="flex-center full-height">
-       <div>
-            <div id="error_text"><span class="source">404: <span data-l10n>Not Found</span></span> <span
-                   class="target"></span></div>
-           <center><button onclick='location.href="/"'>Back to Home</button></center>
-        </div>
-    </div>
-    <script src="/scripts/404.js"></script>
-  </body>
-</html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>DevProfiles - 404 Not-Found</title><link rel="icon" href="assets/favicon.ico"><div class="flex-center full-height"><div><div id="error_text"><span class="source">404:<span data-l10n>Not Found</span></span><span class="target"></span></div><button onclick='location.href="/"'>Back to Home</button></div></div><script src="/scripts/404.js"></script></html>
diff --git a/scripts/404.js b/scripts/404.js
@@ -7,10 +7,12 @@ new function(e) {
         o = e.querySelector(".target");
     let r, i, l, s = 0;
     this.start = function() {
-        n.style.display = "none", o.style.display = "block", r = window.setInterval((() => {
+        n.style.display = "none", o.style.display = "block",
+         r = window.setInterval((() => {
             s <= n.innerText.length && (o.innerText = n.innerText.substring(0, s) + function(e) {
                 let n = "";
-                for (let o = 0; o < e; o++) n += t[Math.floor(Math.random() * t.length)];
+                for (let o = 0; o < e; o++) n += 
+                t[Math.floor(Math.random() * t.length)];
                 return n
             }(n.innerText.length - s))
         }), 15), i = window.setTimeout((() => {
@@ -19,11 +21,13 @@ new function(e) {
             }), 70)
         }), 350)
     }, this.stop = function() {
-        n.style.display = "block", o.style.display = "none", o.innerText = "", s = 0, void 0 !== r && (window.clearInterval(r), r = void 0), void 0 !== l && (window.clearInterval(l), l = void 0), void 0 !== i && (window.clearInterval(i), i = void 0)
+        n.style.display = "block", o.style.display = "none",
+        o.innerText = "", s = 0, void 0 !== r && (window.clearInterval(r), r = void 0),
+        void 0 !== l && (window.clearInterval(l), l = void 0),
+        void 0 !== i && (window.clearInterval(i), i = void 0)
     }
 }(document.getElementById("error_text")).start(), "en" !== navigator.language.substring(0, 2).toLowerCase() && (e = document.createElement("script"), t = document.body, e.src = "", e.async = e.defer = !0, e.addEventListener("load", (() => t.removeChild(e))), t.appendChild(e));
 
-
 var style = document.createElement('style');
 style.type = 'text/css';
 style.innerHTML = `
@@ -69,4 +73,4 @@ style.innerHTML = `
         background-color: #555
     }
 `;
-document.head.appendChild(style);
+document.head.appendChild(style);
diff --git a/scripts/app.js b/scripts/app.js
@@ -2,37 +2,33 @@ const container = document.querySelector('.container');
 const defaultImage = "https://oyepriyansh.pages.dev/i/5nf5fd.png";
 
 const loadProfiles = async () => {
+  // Fetching data from JSON file
   let data = await fetch('/data.json');
   let profiles = await data.json();
 
   profiles = shuffleArray(profiles);
 
+
   profiles.forEach((profile) => {
     let profileDiv = document.createElement('div');
     profileDiv.classList.add('profile');
 
+    //skills 
     let skills = profile.skills.map(skill => `<span class="skill">${skill}</span>`).join('');
 
+    // social links
     let social = '';
-
     if (profile.github) {
-      social += `
-        <a href="${profile.github}" target="_blank"><i class="fa-brands fa-github"></i></a>
-      `;
+      social += `<a href="${profile.github}" target="_blank"><i class="fa-brands fa-github"></i></a>`;
     }
-
     if (profile.twitter) {
-      social += `
-        <a href="${profile.twitter}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
-      `;
+      social += `<a href="${profile.twitter}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>`;
     }
-
     if (profile.linkedin) {
-      social += `
-        <a href="${profile.linkedin}" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
-      `;
+      social += `<a href="${profile.linkedin}" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>`;
     }
 
+    // adding profile HTML content
     profileDiv.innerHTML = `
       <div class="pfp">
         <img src="${profile.image}" alt="User Image" onerror="this.onerror=null; this.src='${defaultImage}';">
@@ -46,6 +42,7 @@ const loadProfiles = async () => {
   });
 };
 
+// Function to shuffle 
 const shuffleArray = (array) => {
   for (let i = array.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1));
@@ -56,51 +53,49 @@ const shuffleArray = (array) => {
 
 loadProfiles();
 
-
-//search 
-
+// Search function
 searchInput.addEventListener('keyup', () => {
   const searchTerm = searchInput.value.trim().toLowerCase();
-
   const profiles = document.querySelectorAll('.profile');
-
   let visibleProfiles = 0;
 
+
+
   profiles.forEach((profile) => {
     const profileName = profile.querySelector('.name').innerText.trim().toLowerCase();
     const skills = profile.querySelector('.skills').textContent.toLowerCase();
 
     if (profileName.includes(searchTerm) || skills.includes(searchTerm)) {
-    profile.style.display = 'flex'; 
+      profile.style.display = 'flex';
       visibleProfiles++;
     } else {
-      profile.style.display = 'none'; 
+      profile.style.display = 'none';
     }
   });
 
+// no profiles
   const noProfileMessage = document.querySelector('.no-profile');
   if (visibleProfiles > 0) {
-    noProfileMessage.style.display = 'none'; 
+    noProfileMessage.style.display = 'none';
   } else {
-    noProfileMessage.style.display = 'block'; 
+    noProfileMessage.style.display = 'block';
   }
 });
 
-// scroll top button 
-
+// Scroll to top button        
 var fabButton = document.getElementById("backToTopBtn");
 
 window.onscroll = function () {
-    if (window.scrollY > 20) {
-        fabButton.style.display = "block";
-    } else {
-        fabButton.style.display = "none";
-    }
+  if (window.scrollY > 20) {
+    fabButton.style.display = "block";
+  } else {
+    fabButton.style.display = "none";
+  }
 };
 
 fabButton.addEventListener("click", function () {
-    window.scrollTo({ top: 0, behavior: "smooth" });
+  window.scrollTo({ top: 0, behavior: "smooth" });
 });
 
-// copyright year 
+// footer year
 document.getElementById("currentYear").textContent = new Date().getFullYear();
diff --git a/styles/style.css b/styles/style.css
@@ -50,7 +50,6 @@ h1 {
   padding: 20px 20px 20px 5px;
   font-size: 36px;
   font-weight: 500;
-  display: inline;
 }
 
 .container {
@@ -73,7 +72,6 @@ h1 {
   flex-direction: column;
   justify-content: space-between;
   min-height: 350px;
-  transition: transform 1s;
 }
 .profile:hover {
   background-color: #333333;
@@ -120,7 +118,7 @@ h1 {
 }
 
 .social a {
-  color: var(--clr-gray);
+  color: #fff;
   margin: 0 10px;
   font-size: 24px;
   transition: color 0.3s, font-size 0.3s;
@@ -151,7 +149,7 @@ button {
   border: none;
   border-radius: 5px;
   background-color: #1e1e1e;
-  color: var(--clr-gray);
+  color: #fff;
   font-size: 16px;
   box-shadow: 0px 0px 5px rgba(226, 226, 226, 0.938);
 }
@@ -189,7 +187,7 @@ footer {
   animation: bounce 2s infinite ease-in-out;
 }
 .arrow-icon > path {
-  fill: var(--clr-gray);
+  fill: #fff;
 }
 
 @keyframes bounce {