Merge pull request #1 from capwan/main

Uploading files
capwan · Jan 6, 2024 · f0f6d83 · f0f6d83
2 parents 0e8fb14 + 83106a8
commit f0f6d83
Show file tree

Hide file tree

Showing 3 changed files with 246 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub Profiles Search</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <form class="user-form" id="form" onsubmit="return formSubmit()">
+        <input type="text" id="search" autofocus placeholder="Type a username here">
+    </form>
+    <main id="main"></main>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,81 @@
+const API_URL = "https://api.github.com/users/";
+
+const main = document.getElementById("main");
+const searchBox = document.getElementById("search");
+
+const getUser = async (username) => {
+    try {
+        const response = await fetch(API_URL + username);
+        const data = await response.json();
+        const card = `
+    <div class="card">
+            <div>
+                <img src="${data.avatar_url}" alt="image" 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="repo"></div>
+            </div>
+        </div>
+    `
+        main.innerHTML = card;
+        getRepos(username);
+        console.log(data);
+    } catch (error) {
+        console.log(error.response.status);
+        if (error.response.status == 404) {
+            createErrorCard('No profile with this username');
+        }
+    }
+}
+
+// init call
+getUser("capwan");
+
+const getRepos = async (username) => {
+    try {
+        const repos = document.getElementById("repo");
+        const response = await fetch(API_URL + username + "/repos");
+        const data = await response.json();
+        console.log(data);
+        data.map((item) => {
+            const elem = document.createElement("a");
+            elem.classList.add("repo");
+            elem.href = item.html_url;
+            elem.innerText = item.name;
+            elem.target = "_blank";
+            repos.appendChild(elem);
+        })
+    } catch (error) {
+        createErrorCard('No profile with this username');
+    }
+}
+
+const formSubmit = (e) => {
+    if (searchBox.value != "") {
+        getUser(searchBox.value);
+        searchBox.value = "";
+    }
+    return false;
+}
+
+searchBox.addEventListener("focusout", () => {
+    formSubmit();
+})
+
+const createErrorCard = (msg) => {
+    const cardHTML = `
+        <div class="card">
+            <h1>${msg}</h1>
+        </div>
+    `
+    main.innerHTML = cardHTML;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,144 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+
+    background: #4b6cb7;
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    overflow-y: scroll;
+}
+
+.user-form {
+    max-width: 700px;
+    width: 100%;
+}
+
+.user-form input {
+    width: 50%;
+    display: block;
+    background-color: #182848;
+    border: none;
+    border-radius: 10px;
+    color: #fff;
+    padding: 1rem;
+    margin: 0 auto 2rem auto;
+    font-family: inherit;
+    font-size: 1rem;
+    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
+    0 0 0 2px #4b6cb7,
+    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
+    position: sticky;   
+}
+
+.user-form input::placeholder {
+    color: #bbb;
+}
+
+.user-form input:focus {
+    outline: none;
+}
+
+.card {
+    max-width: 800px;
+    background-color: #182848;
+    border-radius: 20px;
+    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;
+    margin: 0 1.5rem;
+}
+
+.avatar {
+    border-radius: 40%;
+    border: 10px solid #4b6cb7;
+    height: 150px;
+    width: 150px;
+}
+
+.user-info {
+    color: #eee;
+    margin-left: 2rem;
+}
+
+.user-info h2 {
+    margin-top: 0;
+    text-align: center;
+}
+
+.user-info ul {
+    list-style-type: none;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    max-width: 400px;
+}
+
+.user-info ul li {
+    display: flex;
+    align-items: center;
+}
+
+.user-info ul li strong {
+    font-size: 0.9rem;
+    margin-left: 0.5rem;
+}
+
+.repo {
+    text-decoration: none;
+    color: #fff;
+    background-color: #212a72;
+    font-size: 0.7rem;
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    display: inline-block;
+}
+
+@media (max-width: 320px) {
+    .user-form input {
+        width: 60%;
+        display: block};
+
+    .card {
+        flex-direction: column;
+        align-items: center;
+        width: 20%;
+        height: 10%;
+        max-width: 150px;
+        display: inline-block;
+    }
+
+    .user-info {
+        max-width: 180px;
+        width: 40%;
+        height: 40%;
+        text-align: left;
+        display: inline-block
+    }
+
+    .avatar {
+        max-width: 150px;
+        width: auto;
+        width: 200px;
+        display: block;
+    }
+
+    body{
+        margin: 20rem 0;
+        display: inline-flex;
+        padding: 20px 0; 
+    }
+
+    .user-form {
+        max-width: 500px;
+    }
+
+}