main.js

form = document.querySelector("#form");
matches = document.querySelector("#matches");
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('https://github.uconn.edu/api/v3/search/users?q=' + textbox.value).then(function (response) {
            return response.json();
        }).then(function (obj) {
            console.log(obj)
            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 += `<div id="profile"> <a target="_blank" rel="noopener noreferrer" href="${user.html_url}"><img id="img" src="${user.avatar_url}" width="100" height="100s" alt="Profile Picture"></a> <a target="_blank" rel="noopener noreferrer" href="${user.html_url}"><p id="login">${user.login}</p></a> <hr id="line"></div>` 
                }
            }
            
        })
        
    }
    else{
        error.style.visibility = "visible";
        error.style.display = "block";
        event.preventDefault();
    }
})