diff --git a/projects/FrontendMentor/junior/github-user-search-app/index.html b/projects/FrontendMentor/junior/github-user-search-app/index.html index f7cc790..6dec6e8 100644 --- a/projects/FrontendMentor/junior/github-user-search-app/index.html +++ b/projects/FrontendMentor/junior/github-user-search-app/index.html @@ -7,7 +7,7 @@ - + Frontend Mentor | GitHub user search app @@ -20,7 +20,9 @@ Dark Search GitHub username... + Search + Joined diff --git a/projects/FrontendMentor/junior/github-user-search-app/js/script.js b/projects/FrontendMentor/junior/github-user-search-app/js/script.js index d99df12..f513d3f 100644 --- a/projects/FrontendMentor/junior/github-user-search-app/js/script.js +++ b/projects/FrontendMentor/junior/github-user-search-app/js/script.js @@ -1,3 +1,54 @@ +"use strict"; + +let username = "octocat"; +const apiURL = "https://api.github.com/users/"; + +const searchField = document.getElementById("search-field"); +const searchButton = document.getElementById("search-button"); + +searchButton.addEventListener("click", getProfile); + +window.document.addEventListener("DOMContentLoaded", getProfile); + +async function getProfile() { + try { + addLoaderAnimation(); + + if (searchField.value.length >= 1) { + username = searchField.value; + } + + let url = `${apiURL}${username}`; + + const response = await fetch(url); + // console.log(response); + const data = await response.json(); + + console.log(data); + + // add fields to populate here + } catch (error) { + //do something, we got an error + alert( + `Something has gone wrong. Please try again shortly\n\n ${error}` + ); + console.log("Error: " + error); + + removeLoaderAnimation(); + } +} + +function addLoaderAnimation() { + // button.children[0].classList.add("animate"); + setTimeout(() => { + removeLoaderAnimation(); + }, 2000); +} + +function removeLoaderAnimation() { + // button.children[0].classList.remove("animate"); +} + // example return from api call to https://api.github.com/users/tarasis // {