added github profile search engine

Kushal997-das · Oct 12, 2024 · 5c2a815 · 5c2a815
1 parent 232df59
commit 5c2a815
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 0 deletions.
diff --git a/Web Development/Intermediate/githubProfileSearchEngine/index.html b/Web Development/Intermediate/githubProfileSearchEngine/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <form id="form" onsubmit="return formsubmit()">
+        <input type="text"  id="search" placeholder="search a github profile here">
+    </form>
+    <main id="main">
+    </main>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Web Development/Intermediate/githubProfileSearchEngine/script.js b/Web Development/Intermediate/githubProfileSearchEngine/script.js
@@ -0,0 +1,61 @@
+const APIURL = "https://api.github.com/users/";
+const main = document.getElementById('main');
+const type = document.getElementById("search");
+const getUser = async(username)=>{
+    const response = await fetch(APIURL + username);
+    const data = await response.json();
+    const card = `
+        <div class="card">
+            <div>
+                <img src="${data.avatar_url}" class="avatar">
+            </div>
+            <div class="user-info">
+                <h2>${data.name}</h2>
+                <p>${data.bio}</p>
+                <ul class="info">
+                    <li>${data.followers}<strong>Followers</strong></li>
+                    <li>${data.following}<strong>Following</strong></li>
+                    <li>${data.public_repos}<strong>Repos</strong></li>
+                </ul>
+                <div id="repos">
+                    
+                </div>
+            </div>
+        </div>
+        `
+        main.innerHTML=card;
+        getRepos(username);
+
+}
+
+const getRepos = async (username)=>{
+    const repos = document.querySelector("#repos")
+const response = await fetch(APIURL + username + "/repos")
+const data = await response.json();
+data.forEach((item) => {
+    //console.log(item)
+    const ele = document.createElement('a');
+    ele.classList.add("repo");
+    ele.href=item.html_url;
+    ele.innerHTML=item.name;
+    ele.target='_blank'
+    repos.appendChild(ele);
+});
+
+}
+
+
+
+const form = document.querySelector('#form');
+function formsubmit(){
+    if(type.value != ""){
+        getUser(type.value);
+        type.value="";
+    }
+
+    return false;
+}
+
+type.addEventListener('focusout',function(){
+    formsubmit();
+})
diff --git a/Web Development/Intermediate/githubProfileSearchEngine/style.css b/Web Development/Intermediate/githubProfileSearchEngine/style.css
@@ -0,0 +1,96 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    background-color: #3498db;
+    background-image: linear-gradient(315deg, #3498db 0%, #3498db 74%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+    min-height: 100vh;
+}
+
+input {
+    background-color: #2980b9;
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1);
+    color: white;
+    font-family: inherit;
+    font-size: 1rem;
+    padding: 1rem;
+    margin-bottom: 2rem;
+    width: 400px;
+}
+
+input::placeholder {
+    color: #bbb;
+}
+
+input:focus {
+    outline: none;
+}
+
+.card {
+    background-color:#34495e;
+    background-image: linear-gradient(315deg,#34495e 0%, #34495e 100%);
+    border-radius: 20px;
+    box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1);
+    display: flex;
+    padding: 3rem;
+    max-width: 800px;
+}
+
+.avatar {
+    border: 10px solid #2c3e50;
+    border-radius: 50%;
+    height: 150px;
+    width: 150px;
+}
+
+.user-info {
+    color: #eee;
+    margin-left: 2rem;
+}
+
+.user-info h2 {
+    margin-top: 0;
+}
+
+.user-info ul {
+    display: flex;
+    justify-content: space-between;
+    list-style-type: none;
+    padding: 0;
+    max-width: 400px;
+}
+
+.user-info ul li {
+    display: flex;
+    margin-right: 10px;
+    align-items: center;
+}
+
+.user-info ul li strong {
+    font-size: 0.9rem;
+    margin-left: 0.5rem;
+}
+
+.repo {
+    background-color: #7f8c8d;
+    border-radius: 5px;
+    display: inline-block;
+    color: white;
+    font-size: 0.7rem;
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    text-decoration: none;
+}