couldntfindabetterusername
4 years ago
parent
18b0851332
commit
b414f37f3a
@ -0,0 +1,24 @@
|
|||||||
|
<!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>28 github profiles</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<form action="" id="form">
|
||||||
|
<input type="search" name="search" id="search" placeholder="Search a github user">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div id="profile"></div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
const form = document.getElementById("form");
|
||||||
|
const search = document.getElementById("search");
|
||||||
|
const profile = document.getElementById("profile");
|
||||||
|
|
||||||
|
let searchVal = "";
|
||||||
|
|
||||||
|
form.addEventListener("submit", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
searchVal = search.value;
|
||||||
|
fetchURL("https://api.github.com/users/" + searchVal).then((data) => {
|
||||||
|
displayData(data);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchURL(url) {
|
||||||
|
const res = await fetch(url);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayData(user) {
|
||||||
|
profile.innerHTML = "";
|
||||||
|
|
||||||
|
const {
|
||||||
|
avatar_url,
|
||||||
|
bio,
|
||||||
|
followers,
|
||||||
|
following,
|
||||||
|
name,
|
||||||
|
public_repos,
|
||||||
|
starred_url,
|
||||||
|
} = user;
|
||||||
|
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.classList.add("container");
|
||||||
|
|
||||||
|
const leftDiv = document.createElement("div");
|
||||||
|
leftDiv.classList.add("left");
|
||||||
|
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = avatar_url;
|
||||||
|
img.alt = name;
|
||||||
|
|
||||||
|
const rightDiv = document.createElement("div");
|
||||||
|
rightDiv.classList.add("right");
|
||||||
|
|
||||||
|
const h2 = document.createElement("h2");
|
||||||
|
h2.classList.add("name");
|
||||||
|
h2.append(document.createTextNode(name));
|
||||||
|
|
||||||
|
const p = document.createElement("p");
|
||||||
|
p.classList.add("bio");
|
||||||
|
p.append(document.createTextNode(bio));
|
||||||
|
|
||||||
|
const panelWrapper = document.createElement("section");
|
||||||
|
|
||||||
|
const followersPanel = document.createElement("div");
|
||||||
|
|
||||||
|
const followersNum = document.createElement("span");
|
||||||
|
followersNum.classList.add("value");
|
||||||
|
followersNum.append(document.createTextNode(followers));
|
||||||
|
|
||||||
|
const followersLabel = document.createElement("strong");
|
||||||
|
followersLabel.append(document.createTextNode("Followers"));
|
||||||
|
|
||||||
|
const followingPanel = document.createElement("div");
|
||||||
|
|
||||||
|
const followingNum = document.createElement("span");
|
||||||
|
followingNum.classList.add("value");
|
||||||
|
followingNum.append(document.createTextNode(following));
|
||||||
|
|
||||||
|
const followingLabel = document.createElement("strong");
|
||||||
|
followingLabel.append(document.createTextNode("Following"));
|
||||||
|
|
||||||
|
const reposPanel = document.createElement("div");
|
||||||
|
|
||||||
|
const reposNum = document.createElement("span");
|
||||||
|
reposNum.classList.add("value");
|
||||||
|
reposNum.append(document.createTextNode(public_repos));
|
||||||
|
|
||||||
|
const reposLabel = document.createElement("strong");
|
||||||
|
reposLabel.append(document.createTextNode("Repos"));
|
||||||
|
|
||||||
|
profile.append(container);
|
||||||
|
|
||||||
|
container.append(leftDiv);
|
||||||
|
leftDiv.append(img);
|
||||||
|
|
||||||
|
container.append(rightDiv);
|
||||||
|
rightDiv.append(h2);
|
||||||
|
rightDiv.append(p);
|
||||||
|
rightDiv.append(panelWrapper);
|
||||||
|
|
||||||
|
panelWrapper.append(followersPanel);
|
||||||
|
panelWrapper.append(followingPanel);
|
||||||
|
panelWrapper.append(reposPanel);
|
||||||
|
|
||||||
|
followersPanel.append(followersNum);
|
||||||
|
followersPanel.append(followersLabel);
|
||||||
|
|
||||||
|
followingPanel.append(followingNum);
|
||||||
|
followingPanel.append(followingLabel);
|
||||||
|
|
||||||
|
reposPanel.append(reposNum);
|
||||||
|
reposPanel.append(reposLabel);
|
||||||
|
}
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
background: #2a2a72;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 600px;
|
||||||
|
padding: 20px 15px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
background-color: #4c2885;
|
||||||
|
border: unset;
|
||||||
|
outline: none;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: #4c2885;
|
||||||
|
padding: 50px;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
min-width: 150px;
|
||||||
|
min-height: 150px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 30px;
|
||||||
|
max-width: 150px;
|
||||||
|
max-height: 150px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #2a2a72;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left img {
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue