From 4ed1575daaeb42ecf63f3fbcf104a0e25748ff7c Mon Sep 17 00:00:00 2001 From: Paolo Bautista Date: Mon, 4 Apr 2022 23:57:40 -0400 Subject: [PATCH] Uconn Github User Search API --- week-10/index.html | 25 +++++++++++------- week-10/main.js | 34 +++++++++++++++--------- week-10/style.css | 65 ++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 100 insertions(+), 24 deletions(-) diff --git a/week-10/index.html b/week-10/index.html index 11c9534..4054bb7 100644 --- a/week-10/index.html +++ b/week-10/index.html @@ -8,18 +8,23 @@ -

GITHUB USER SEARCH

-
- - - -

Input must be at least 1 character long!

-

Number of matches found:

-

ID:

- Profile Picture +
+ +

+
+
+
+ - \ No newline at end of file diff --git a/week-10/main.js b/week-10/main.js index 48f600e..2b2eb83 100644 --- a/week-10/main.js +++ b/week-10/main.js @@ -4,30 +4,40 @@ id = document.querySelector("#id"); img = document.querySelector("#img"); error = document.querySelector("#error"); textbox = document.querySelector("#textbox"); +body = document.querySelector('#results'); form.addEventListener("submit", function checkLength(event) { if(textbox.value.length >= 1 && textbox.value.length <= 100){ event.preventDefault(); - fetch('users.json').then(function (response) { + fetch('https://github.uconn.edu/api/v3/search/users?q=' + textbox.value).then(function (response) { return response.json(); }).then(function (obj) { console.log(obj) - error.style.display = "none"; - matches.style.display = "block"; - id.style.display = "block"; - img.style.display = "block"; - - console.log(obj['items'][0]['login']) - console.log(obj['total_count']) - login = obj.items - console.log(login) - for(user of obj.items) { - + if (obj['total_count'] == 0){ + error2.style.display = "block"; + error.style.visibility = "hidden"; + error.style.display = "none"; + document.querySelector('#results').style.padding = "0" + } else{ + document.querySelector('#menu').style.top = "0%" + document.querySelector('#menu').style.position = "inherit" + document.querySelector('#results').style.padding = "1em" + error2.style.display = "none"; + error.style.visibility = "hidden"; + error.style.display = "block"; + matches.style.display = "block"; + matches.innerHTML = "Number of matches found: " + obj['total_count'] + body.innerHTML = null; + for(user of obj.items) { + body.innerHTML += `` + } } + }) } else{ + error.style.visibility = "visible"; error.style.display = "block"; event.preventDefault(); } diff --git a/week-10/style.css b/week-10/style.css index 2a746e6..364eec0 100644 --- a/week-10/style.css +++ b/week-10/style.css @@ -1,9 +1,70 @@ -body { +.container, #menu { display:flex; flex-direction: column; align-items: center; } +html{ + background-color: black; +} + +#matches { + display: none; +} -#error, #matches, #id, #img { +#error { + color: red; + visibility:hidden; +} +#error2 { + color: red; display: none; + padding-left: 3em; +} +#matches, #login { + color: whitesmoke; +} +#menu { + background-color:burlywood; + padding: 1em; + padding-top: 2em; + border-radius: 1em; + position: absolute; + top: 32%; +} +#results { + background-color: grey; + display: none; + display: flex; + flex-wrap: wrap; + justify-content: center; +} +#line { + width: 3em; +} +#profile { + display: flex; + align-items: center; + flex-direction: column; + margin: 1em; +} +#login { + margin-bottom: 0; +} +a { + text-decoration: none; +} +#login:hover { + background-color:rgb(255, 252, 240); + color: black; +} +#img:hover { + box-shadow: 10px 10px 5px; +} + + + +#footer { + color: white; + display: flex; + justify-content: center; } \ No newline at end of file