most of the JavaScript done, needs finishing for populating data to html, and classes to add / remove loader animation

This commit is contained in:
Robert McGovern 2022-11-09 15:12:18 +00:00
parent 8d98f542a6
commit 9637f47d8f
2 changed files with 54 additions and 1 deletions

View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<script src="js/script.js" async></script> <!-- <script src="js/script.js" defer></script> -->
<title>Frontend Mentor | GitHub user search app</title> <title>Frontend Mentor | GitHub user search app</title>
</head> </head>
@ -20,7 +20,9 @@
Dark Dark
Search GitHub username... Search GitHub username...
<input type="text" name="search-username" id="search-field">
Search Search
<button type="submit" id="search-button"></button>
Joined Joined

View File

@ -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 // example return from api call to https://api.github.com/users/tarasis
// { // {