Add files via upload

pranjalgupta4 · Nov 9, 2024 · e2ffa2b · e2ffa2b
commit e2ffa2b
Show file tree

Hide file tree

Showing 3 changed files with 250 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Github Profile Getter</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <div id="main" class="fade-in active">
+        <div class="main">
+          <div class="main-txt">
+            <h1>Github Profile Getter</h1>
+          </div>
+          <input type="text" placeholder="enter username" id="input" />
+          <button id="button">
+            Get Profile
+          </button>
+        </div>
+      </div>
+      <div id="main2" class="hidden fade-out">
+        <div class="top">
+          <div class="main-txt2">
+            <h1>Github Profile Getter</h1>
+          </div>
+          <input
+            type="text"
+            placeholder="enter username"
+            id="input2"
+            value=""
+          />
+        </div>
+        <div class="card">
+          <img src="" alt="" id="profile-pic" />
+          <div>
+            <p id="name"></p>
+            <a href="" id="username-url"><p id="username"></p></a>
+            <p id="bio"></p>
+          </div>
+        </div>
+      </div>
+    </main>
+    <script type="module" src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,93 @@
+// import axios from "/axios";
+// async function fetchGH() {
+//   const response = await fetch(
+//     "https://api.github.com/repos/facebook/react/issues",
+//     {
+//       headers: {
+//
+//       },
+//     }
+//   );
+//   return await response.json();
+// }
+// fetchGH();
+
+let input = document.getElementById("input");
+let input2 = document.getElementById("input2");
+let button = document.getElementById("button");
+
+function toggleFade() {
+  const element1 = document.getElementById("main");
+  const element2 = document.getElementById("main2");
+
+  element1.classList.toggle("fade-in");
+  element1.classList.toggle("fade-out");
+  element2.classList.toggle("fade-in");
+  element2.classList.toggle("fade-out");
+
+  setTimeout(() => {
+    element1.classList.toggle("hidden");
+    element2.classList.toggle("hidden");
+    element1.classList.toggle("active");
+    element2.classList.toggle("active");
+  }, 500);
+}
+
+let name1 = document.getElementById("name");
+let usernamename = document.getElementById("username");
+let bio = document.getElementById("bio");
+let username_url = document.getElementById("username-url");
+let profile_pic = document.getElementById("profile-pic");
+
+function setData() {
+  let p = fetch(`https://api.github.com/users/${input.value}`);
+  p.then((response) => response.json())
+    .then((data) => {
+      name1.innerHTML = data.name;
+      usernamename.innerHTML = data.login;
+      bio.innerHTML = data.bio;
+      username_url.setAttribute("href", data.html_url);
+      profile_pic.setAttribute("src", data.avatar_url);
+      input2.setAttribute("value", data.login);
+    })
+    .catch((error) => console.log("Error:", error));
+}
+
+input.addEventListener("keydown", function (e) {
+  if (e.key === "Enter") {
+    toggleFade();
+    setData();
+  }
+});
+input2.addEventListener("keydown", function (e) {
+  if (e.key === "Enter") {
+    toggleFade();
+    setData();
+  }
+});
+input.addEventListener("keydown", function (e) {
+  if (e.key === "Enter") {
+    toggleFade();
+    setData();
+  }
+});
+button.addEventListener("click", function () {
+  toggleFade();
+  setData();
+});
+// const APIURL = "https://api.github.com/users/";
+// const main = document.querySelector("#main");
+// const getUser = async (username) => {
+//   const response = await fetch(APIURL + username);
+//   const data = await response.json();
+//   console.log(data);
+// };
+// getUser("pranjalgupta4");
+
+// axios
+//   .get("https://api.github.com/users/pranjalgupta4", {
+//
+//   })
+//   .then((res) => {
+//     console.log(res.data);
+//   });
diff --git a/style.css b/style.css
@@ -0,0 +1,111 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  background-color: #f5f5f5;
+}
+a {
+  text-decoration: none;
+}
+.main {
+  margin: 10vw 20vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.main-txt {
+  font-size: 2.5rem;
+  margin-bottom: 3vw;
+  color: rgba(0, 77, 77, 1);
+  text-shadow: 3px 3px rgba(0, 128, 128, 0.406);
+}
+#input {
+  width: 100%;
+  padding: 1vw 58px;
+  font-size: 1.5rem;
+  border-radius: 50px;
+  background: left no-repeat url("img/search.jpg");
+  background-size: 55px;
+}
+#button {
+  margin-top: 3rem;
+  padding: 1vw 2vw;
+  width: 20vw;
+  font-size: 1.5rem;
+  border-radius: 50px;
+  background-color: rgba(0, 77, 77, 1);
+  color: white;
+  cursor: pointer;
+}
+.top {
+  margin: 10vw 20vw 2vw;
+  display: flex;
+  flex-direction: row;
+}
+.main-txt2 {
+  font-size: 1rem;
+  margin-bottom: 3vw;
+  color: rgba(0, 77, 77, 1);
+  text-shadow: 1.5px 1.5px rgba(0, 128, 128, 0.406);
+}
+#input2 {
+  width: 40%;
+  height: 10%;
+  padding: 0.5vw 58px;
+  margin-left: 3rem;
+  font-size: 1.5rem;
+  border-radius: 50px;
+  background: left no-repeat url("img/search.jpg");
+  background-size: 55px;
+}
+.card {
+  margin: 0vw 20vw;
+  display: flex;
+  flex-direction: row;
+  background-color: rgba(0, 128, 128, 0.406);
+  border-radius: 20px;
+  box-shadow: 5px 5px 5px rgba(64, 192, 192, 0.406);
+}
+#profile-pic {
+  border-radius: 50%;
+  margin: 2vw;
+  width: 20vw;
+}
+#name {
+  font-size: 3rem;
+  margin: 2vw 2vw 0 2vw;
+  color: rgba(0, 64, 64, 0.925);
+}
+#username {
+  font-size: 1.5rem;
+  margin: 0.5vw 2vw;
+  color: rgba(128, 128, 128, 0.829);
+
+}
+#username::before {
+  content: "@";
+}
+#bio {
+  font-size: 1.5rem;
+  margin: 2vw;
+  color: rgba(0, 128, 128, 0.906);
+
+}
+.fade-in {
+  opacity: 1;
+  transition: opacity 1s ease-in-out;
+}
+
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.hidden {
+  display: none;
+}
+.active {
+  display: block;
+}