Fictizia · codemcu · Dec 12, 2018 · Dec 18, 2018 · Dec 18, 2018 · Dec 18, 2018
diff --git a/mauricio/githubSearch/css/style.css b/mauricio/githubSearch/css/style.css
@@ -0,0 +1,92 @@
+/* https://color.adobe.com/es/Copy-of-Pastels-color-theme-11580203/
+background: #F8B195"
+background: #F67280"
+background: #C06C84"
+background: #6C5B7B"
+background: #355C7D"*/
+
+body {
+  /*background-color: #F8B195;*/
+  font-family: 'Roboto', sans-serif;
+}
+
+h1 {
+  text-align: center;
+}
+
+.container {
+  max-width: 1200px;
+  margin: auto;
+}
+
+.logo {
+  max-width: 2.5rem;
+  vertical-align: sub;
+}
+
+input {
+  margin: 0 auto 3.125rem;
+  display: block;
+  font-size: 1.875rem;
+  padding: 0.3125rem 0.9375rem;
+  border: 0.125rem solid #355C7D;
+}
+
+p {
+  text-align: left;
+  margin: 0;
+}
+
+ul {
+  width: 620px;
+  margin: 0 auto 0;
+  list-style-type: none;
+  /*background-color: #355C7D;*/
+  padding: 1.25rem 1.25rem 0.3125rem 1.25rem;
+  color: #fff;
+}
+
+ul li {
+  margin: 0.45rem 0 1.75rem 0;
+  position: relative;
+  padding: 20px 4.0625rem 20px 110px;
+  font-size: 1.25rem;
+  background-color: #355C7D;
+}
+
+ul li a {
+  display: block;
+}
+
+ul li img {
+  width: 3.5rem;
+  height: 3.5rem;
+  position: absolute;
+  left: 4%;
+  top: 50%;
+  transform: translate(0%, -50%);
+  border-radius: 50%;
+  border: 0.125rem solid #F8B195;
+  padding: 0.125rem;
+}
+
+div .user-details {
+  display: table;
+  width: 100%;
+  margin-top: 0.3125rem;
+}
+
+div .user-details div {
+  display: table-cell;
+  width: 35%;
+  font-size: 1rem;
+}
+
+.p-username {
+  font-weight: 700;
+  margin-bottom: 0.3125rem;
+}
+
+span {
+  font-weight: 300;
+}
diff --git a/mauricio/githubSearch/img/github.png b/mauricio/githubSearch/img/github.png
diff --git a/mauricio/githubSearch/index.html b/mauricio/githubSearch/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
+  <link rel="stylesheet" href="css/style.css" type="text/css"/>
+</head>
+<body>
+
+  <div class="container">
+    <h1>Search by username <img class="logo" src="img/github.png"></h1>
+
+    <input type="text" id="input" placeholder="Eric Elliott"/>
+  </div>
+
+  <script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
+
diff --git a/mauricio/githubSearch/js/main.js b/mauricio/githubSearch/js/main.js
@@ -0,0 +1,108 @@
+(function () {
+
+  const input = document.querySelector('input');
+  input.addEventListener('keyup', searchUser, false);
+  const container = document.querySelector('.container');
+
+  function searchUser($event) {
+
+    if ($event.code === 'Enter' && $event.isTrusted) {
+
+      if (input.value.trim() === '') {
+
+        const p = document.createElement('P');
+        container.appendChild(p);
+        p.textContent = 'Please enter username';
+        return false;
+
+      } else {
+
+        if (document.querySelector('ul') !== null) {
+          document.querySelector('ul').remove();
+        }
+
+        const text = input.value.trim();
+
+        loadAjax(`https://api.github.com/search/users?q=${text}+in%3Afullname&type=Users`)
+          .then(getNetwork)
+          .catch(error => console.log(error));
+
+      }
+    }
+  }
+
+  function loadAjax(url) {
+    return new Promise((resolve, reject) => {
+      fetch(url)
+        .then(json => json.json())
+        .then(resolve)
+        .catch(reject);
+    })
+  }
+
+  function getNetwork(urlNetwork) {
+    const users = urlNetwork.items;
+
+    if (users && users.length) {
+
+      users.forEach(function (item) {
+
+        const followers = new Promise( (resolve, reject) => {
+          loadAjax(`https://api.github.com/users/${item.login}/followers`)
+            .then(resolve)
+        })
+
+        const followings = new Promise( (resolve, reject) => {
+          loadAjax(`https://api.github.com/users/${item.login}/following`)
+            .then(resolve)
+        })
+
+        createContainerUser(item, followers, followings);
+      });
+    } else {
+      feedBackMessage('No users found');
+    }
+  }
+
+  function createContainerUser(item, followers, followings) {
+    const ul = document.createElement('UL');
+    const li = document.createElement('LI');
+    const img = document.createElement('IMG');
+    const div = document.createElement('DIV');
+    div.setAttribute('class', 'user-details');
+
+    const divScore = document.createElement('DIV');
+
+    li.appendChild(document.createTextNode(item.login));
+
+    divScore.innerHTML = `Score: <span>${item.score.toFixed(2)}</span>`;
+
+    img.setAttribute('src', item.avatar_url);
+
+    ul.appendChild(li);
+    li.appendChild(img);
+    li.appendChild(div);
+    div.appendChild(divScore);
+    container.appendChild(ul);
+
+    getFollowers(followers, div);
+    getFollowings(followings, div);
+  }
+
+  function getFollowers (followers, div) {
+    followers.then( res => {
+      const divFollower = document.createElement('DIV');
+      divFollower.innerHTML = `Followers: <span>${res.length}</span>`;
+      div.appendChild(divFollower);
+    });
+  }
+
+  function getFollowings(followings, div) {
+    followings.then( res => {
+      const divFollowing = document.createElement('DIV');
+      divFollowing.innerHTML = `Followings: <span>${res.length}</span>`;
+      div.appendChild(divFollowing);
+    });
+  }
+
+})();