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,83 @@
+body {
+  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;
+  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,111 @@
+(() => {
+
+  const input = document.querySelector('input');
+  input.addEventListener('keyup', searchUser, false);
+  const container = document.querySelector('.container');
+
+  async function searchUser(event) {
+
+    try {
+      if (event.code === 'Enter' && event.isTrusted) {
+
+        if (!!input.value.trim()) {
+
+          if (document.querySelector('ul') !== null) {
+            document.querySelector('ul').remove();
+          }
+          if (document.querySelector('p') !== null) {
+            document.querySelector('p').remove();
+          }
+
+          const text = input.value.trim();
+
+          const response = await callApi(`https://api.github.com/search/users?q=${text}+in%3Afullname&type=Users`);
+          generateUserList(response);
+
+        } else {
+          const p = document.createElement('P');
+          container.appendChild(p);
+          p.textContent = 'Please enter username';
+          return false;
+        }
+      }
+    } catch (error) {
+      console.log('searchUser', error);
+    }
+
+  }
+
+  function ajax(url) {
+    return new Promise((resolve, reject) => {
+      fetch(url)
+        .then(response => {
+          if (response.status === 200) {
+            resolve(response.json())
+          } else {
+            reject(response.json());
+          }
+        })
+        .catch(error => console.log('ajax', error));
+    })
+  }
+
+  async function callApi(url) {
+    try {
+      return await ajax(url);
+    } catch (error) {
+      console.log('callApi', error);
+    }
+  }
+
+  function generateUserList(data) {
+    if (data.items && data.items.length) {
+      const ul = document.createElement('UL');
+      container.appendChild(ul);
+
+      const users = data.items;
+      const urls = users.map(user => user.url);
+      const request = urls.map(url => fetch(url).then(res => res.json()));
+
+      Promise.all(request)
+        .then(res => {
+          res.forEach( item => {
+            const div = makeTemplate(item);
+            ul.insertAdjacentHTML('afterbegin', div);
+          });
+        })
+        .catch(err => console.log(err));
+    } else {
+      const p = document.createElement('P');
+      container.appendChild(p);
+      p.textContent = 'Please enter a valid name';
+      return false;
+    }
+
+  }
+
+  function makeTemplate(item) {
+    const template =
+    `
+      <li>${item.login}
+        <a href="${item.html_url}" target="_blank">
+          <img src="${item.avatar_url}">
+        </a>
+        <div class="user-details">
+          <div>Score:
+            <span></span>
+          </div>
+          <div>
+            <span>Followers: ${item.followers}</span>
+          </div>
+          <div>
+            <span>Followings: ${item.following}</span>
+          </div>
+        </div>
+       </li>
+    `;
+
+    return template;
+  }
+
+})();