Add files via upload

adi-ray · Oct 18, 2023 · cd4211f · cd4211f
1 parent 027f418
commit cd4211f
Show file tree

Hide file tree

Showing 17 changed files with 649 additions and 0 deletions.
diff --git a/Images/android-chrome-192x192.png b/Images/android-chrome-192x192.png
diff --git a/Images/android-chrome-512x512.png b/Images/android-chrome-512x512.png
diff --git a/Images/apple-touch-icon.png b/Images/apple-touch-icon.png
diff --git a/Images/company-icon.svg b/Images/company-icon.svg
diff --git a/Images/favicon-16x16.png b/Images/favicon-16x16.png
diff --git a/Images/favicon-32x32.png b/Images/favicon-32x32.png
diff --git a/Images/favicon.ico b/Images/favicon.ico
diff --git a/Images/location-icon.svg b/Images/location-icon.svg
diff --git a/Images/moon-icon.svg b/Images/moon-icon.svg
diff --git a/Images/search-icon.svg b/Images/search-icon.svg
diff --git a/Images/site.webmanifest b/Images/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/Images/sun-icon.svg b/Images/sun-icon.svg
diff --git a/Images/twitter-icon.svg b/Images/twitter-icon.svg
diff --git a/Images/website-icon.svg b/Images/website-icon.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DevDetective</title>
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./Images/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./Images/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./Images/favicon-16x16.png"
+    />
+    <link rel="manifest" href="./Images/site.webmanifest" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- CSS  -->
+    <link rel="stylesheet" href="./style.css" />
+
+    <!-- JS -->
+    <script src="./script.js" defer></script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="container">
+        <!-- Header  -->
+        <header class="header">
+          <h1 class="title">DevDetective</h1>
+          <div class="btn" id="modeBtn">
+            <p id="modeText">dark</p>
+            <div class="iconContainer">
+              <img
+                src="./Images/moon-icon.svg"
+                alt=""
+                id="modeIcon"
+                loading="lazy"
+              />
+            </div>
+          </div>
+        </header>
+
+        <main>
+          <!-- Search Container -->
+          <div class="searchContainer">
+            <input
+              type="text"
+              id="input"
+              placeholder="Enter a Github username..."
+              required
+              autofocus
+            />
+
+            <div class="error">
+              <p id="noResults">no search results</p>
+            </div>
+
+            <button id="btn">Search </button>
+          </div>
+
+          <!-- Profile Container -->
+          <div class="profileContainer">
+            <div class="profileContent">
+              <div class="profileHeader">
+                <img id="userImage" loading="lazy" />
+                <div class="profileInfoWrapper">
+                  <div class="profileName">
+                    <h2 id="name"></h2>
+                    <a
+                      href=""
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      id="username"
+                    ></a>
+                  </div>
+                  <p id="date"></p>
+                </div>
+              </div>
+
+              <p id="profileBio"></p>
+
+              <div class="statsContainer">
+                <div class="profileStats">
+                  <p class="statsTitle">Repositories</p>
+                  <a id="repos"></a>
+                </div>
+                <div class="profileStats">
+                  <p class="statsTitle">Followers</p>
+                  <a id="followers"></a>
+                </div>
+                <div class="profileStats">
+                  <p class="statsTitle">Following</p>
+                  <a id="following"></a>
+                </div>
+              </div>
+
+              <div class="profileFooter">
+                <div class="profileInfo">
+                  <div class="bottomIcon">
+                    <img
+                      src="./Images/location-icon.svg"
+                      alt=""
+                      loading="lazy"
+                    />
+                  </div>
+                  <p id="location"></p>
+                </div>
+
+                <div class="profileInfo">
+                  <div class="bottomIcon">
+                    <img
+                      src="./Images/website-icon.svg"
+                      alt=""
+                      loading="lazy"
+                    />
+                  </div>
+                  <a id="website"></a>
+                </div>
+                <div class="profileInfo">
+                  <div class="bottomIcon">
+                    <img
+                      src="./Images/twitter-icon.svg"
+                      alt=""
+                      loading="lazy"
+                    />
+                  </div>
+                  <a id="twitter"></a>
+                </div>
+                <div class="profileInfo">
+                  <div class="bottomIcon">
+                    <img
+                      src="./Images/company-icon.svg"
+                      alt=""
+                      loading="lazy"
+                    />
+                  </div>
+                  <p id="company"></p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </main>
+
+      </div>
+    </div>
+
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,172 @@
+const url = "https://api.github.com/users/";
+const get = (element) => document.getElementById(`${element}`);
+
+
+const input = get("input");
+const btn = get("btn");
+
+
+btn.addEventListener('click', () => {
+    if (input.value !== "") {
+        getUserData(url + input.value);
+    }
+})
+
+input.addEventListener('keydown', (e) => {
+
+    if (e.key === 'Enter') {
+        if (input.value !== "") {
+            getUserData(url + input.value);
+        }
+    }
+}, false);
+
+async function getUserData(gitUrl) {
+    const response = await fetch(gitUrl);
+    const data = await response.json();
+    if (!data) {
+        throw data;
+    }
+    updateProfile(data);
+    // return data;
+}
+
+let dateSegment;
+const noResults = get("noResults");
+
+function updateProfile(data) {
+    noResults.style.scale = 0;
+    if (data.message !== "Not Found") {
+        function checkNull(apiItem, domItem) {
+            if (apiItem === "" || apiItem === null) {
+                domItem.style.opacity = 0.5;
+                domItem.previousElementSibling.style.opacity = 0.5;
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        const userImage = get("userImage");
+        const name = get("name");
+        const username = get("username");
+        const date = get("date");
+        const repos = get("repos");
+        const followers = get("followers");
+        const following = get("following");
+        const profileBio = get("profileBio");
+        const location = get("location");
+        const website = get("website");
+        const twitter = get("twitter");
+        const company = get("company");
+        const month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+
+        // console.log(name);
+        userImage.src = `${data.avatar_url}`;
+        name.innerText = data?.name;
+        username.innerText = `@${data?.login}`;
+        username.href = data?.html_url;
+        dateSegment = data?.created_at.split("T").shift().split("-");
+        date.innerText = `Joined ${dateSegment[2]} ${month[dateSegment[1] - 1]} ${dateSegment[0]}`;
+
+        profileBio.innerText = (data?.bio === null) ? "This Profile has no Bio" : data?.bio;;
+
+        repos.innerText = data?.public_repos;
+        repos.href = data?.repos_url;
+        followers.innerText = data?.followers;
+        followers.href = data?.followers_url;
+        following.innerText = data?.following;
+        following.href = data?.following_url;
+
+        location.innerText = checkNull(data?.location, location) ? data?.location : "Not Available";
+
+        website.innerText = checkNull(data?.blog, website) ? data?.blog : "Not Available";
+
+        website.href = checkNull(data?.blog, website) ? data?.blog : "#";
+
+        twitter.innerText = checkNull(data?.twitter_username, twitter) ? data?.twitter_username : "Not Available";
+
+        twitter.href = checkNull(data?.twitter_username, twitter) ? `https://twitter.com/${data?.twitter_username}` : "#";
+
+        company.innerText = checkNull(data?.company, company) ? data?.company : "Not Available";
+    }
+    else {
+        noResults.style.scale = 1;
+        setTimeout(() => {
+            noResults.style.scale = 0;
+        }, 2500);
+    }
+}
+
+
+// Dark And Light Mode 
+const modeBtn = get("modeBtn");
+const modeText = get("modeText");
+const modeIcon = get("modeIcon");
+let darkMode = false;
+const root = document.documentElement.style;
+
+modeBtn.addEventListener("click", () => {
+
+    if (darkMode === false) {
+        enableDarkMode();
+    }
+    else {
+        enableLightMode();
+    }
+});
+
+function enableDarkMode() {
+    root.setProperty("--lm-bg", "#141D2F");
+    root.setProperty("--lm-bg-content", "#1E2A47");
+    root.setProperty("--lm-text", "white");
+    root.setProperty("--lm-text-alt", "white");
+    root.setProperty("--lm-shadow-xl", "rgba(70,88,109,0.15)");
+    modeText.innerText = "LIGHT";
+    modeIcon.src = "./Images/sun-icon.svg";
+    root.setProperty("--lm-icon-bg", "brightness(1000%)");
+    darkMode = true;
+    localStorage.setItem("dark-mode", true);
+
+}
+
+function enableLightMode() {
+    root.setProperty("--lm-bg", "#F6F8FF");
+    root.setProperty("--lm-bg-content", "#FEFEFE");
+    root.setProperty("--lm-text", "#4B6A9B");
+    root.setProperty("--lm-text-alt", "#2B3442");
+    root.setProperty("--lm-shadow-xl", "rgba(70, 88, 109, 0.25)");
+    modeText.innerText = "DARK";
+    modeIcon.src = "./Images/moon-icon.svg";
+    root.setProperty("--lm-icon-bg", "brightness(100%)");
+    darkMode = false;
+    localStorage.setItem("dark-mode", false);
+}
+
+
+// This code checks if the user's device has a preference for dark mode
+const prefersDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+// Check if there is a value for "dark-mode" in the user's localStorage
+if (localStorage.getItem("dark-mode") === null) {
+    // If there is no value for "dark-mode" in localStorage, check the device preference
+    if (prefersDarkMode) {
+        // If the device preference is for dark mode, apply dark mode properties
+        enableDarkMode();
+    } else {
+        // If the device preference is not for dark mode, apply light mode properties
+        enableLightMode();
+    }
+} else {
+    // If there is a value for "dark-mode" in localStorage, use that value instead of device preference
+    if (localStorage.getItem("dark-mode") === "true") {
+        // If the value is "true", apply dark mode properties
+        enableDarkMode();
+    } else {
+        // If the value is not "true", apply light mode properties
+        enableLightMode();
+    }
+}
+
+getUserData(url + "adi-ray");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}