diff --git a/mauricio/githubSearch/css/style.css b/mauricio/githubSearch/css/style.css new file mode 100644 index 0000000..9de1dc2 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/mauricio/githubSearch/img/github.png b/mauricio/githubSearch/img/github.png new file mode 100644 index 0000000..f13a10c Binary files /dev/null and b/mauricio/githubSearch/img/github.png differ diff --git a/mauricio/githubSearch/index.html b/mauricio/githubSearch/index.html new file mode 100644 index 0000000..56f6b46 --- /dev/null +++ b/mauricio/githubSearch/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + + + + +
+

Search by username

+ + +
+ + + + + diff --git a/mauricio/githubSearch/js/main.js b/mauricio/githubSearch/js/main.js new file mode 100644 index 0000000..700655b --- /dev/null +++ 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 = + ` +
  • ${item.login} + + + +
    +
    Score: + +
    +
    + Followers: ${item.followers} +
    +
    + Followings: ${item.following} +
    +
    +
    • + `; + + return template; + } + +})();