day 28 completed

4 years ago · b414f37f3a
parent 18b0851332
commit b414f37f3a
3 changed files with 210 additions and 0 deletions
--- a/code/28-github-profiles/index.html
+++ b/code/28-github-profiles/index.html
@ -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>
--- a/code/28-github-profiles/script.js
+++ b/code/28-github-profiles/script.js
@ -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);
+}
--- a/code/28-github-profiles/style.css
+++ b/code/28-github-profiles/style.css
@ -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;
+}