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

projects/FrontendMentor/junior/github-user-search-app/index.html

@@ -7,7 +7,7 @@
 
   <link rel="stylesheet" href="css/styles.css">
   <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>
 </head>
@@ -20,7 +20,9 @@
   Dark
 
   Search GitHub username...
+  <input type="text" name="search-username" id="search-field">
   Search
+  <button type="submit" id="search-button"></button>
 
   Joined
 

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
 
 // {