index.js

const searchBar = document.querySelector(".searchbar-Container");
const profileContainer = document.querySelector(".profile-Container");
const root = document.documentElement.style;
const get = (param) =>  document.getElementById(`${param}`);
const url = "https://api.github.com/users/";
const noResults = get("no-Result");
const btnMode = get("btn-Mode")
const modeText = get("mode-Text");
const modeIcon = get("mode-Icon");
const btnSubmit = get("submit");
const input = get("input");
const avatar = get("avatar");
const userName = get("name");
const user = get("user");
const date = get("date");
const months = ["jan","fab", "mar", "apr","may", "jun", "july","aug", "sep", "oct","nov", "dec"];
const bio = get("bio");
const repos = get("repos");
const followers= get("followers");
const following = get("following");
const user_location = get("location");
const page = get("page");
const twitter = get("twitter");
const company = get("company");
let darkMode = false;

btnSubmit.addEventListener("click", function(){
    if(input.value !== ""){
        getUserData(url + input.value);
    }
});

input.addEventListener(
    "keydown",
    function(e){
        if(e.key == "Enter"){
            if(input.value !== ""){
                getUserData(url + input.value);
            }
        }
    },
    false
);

input.addEventListener("input", function(){
    noResults.style.display("none");
});

btnMode.addEventListener("click", function(){
    if(darkMode == false){
        changeInDarkMode();
    }
    else{
        changeInLightMode();
    }
});


function getUserData(gitUrl){
    fetch(gitUrl)
       .then((response) => response.json())
       .then((data) => {
           console.log(data);
           updateProfile(data);
    })
    .catch((error) => {
        throw error;
    });    
}

function updateProfile(data){
    if(data.message !== "Not found"){
        noResults.style.display = "none";
        function checkNull(param1, param2){
            if(param1 === "" || param1 === null){
                param2.style.opacity = 0.5;
                param2.previousElementSibling.style.opacity = 0.5;
                return false;
            }
            else{
                return true;
            }
        }
        avatar.src = `${data.avatar_url}`;
        userName.innerText = data.name === null? data.login : data.name;
        user.innertext = `@${data.login}`;
        user.href = `${data.html_url}`;
        datesegments = data.created_at.split("T").shift().split("-");
        date.innerText = `Joined ${datesegments[2]} ${months[datesegments[1] - 1]} ${datesegments[0]}`;
    bio.innerText = data.bio == null ? "This profile has no bio" : `${data.bio}`;
    repos.innerText = `${data.public_repos}`;
    followers.innerText = `${data.followers}`;
    following.innerText = `${data.following}`;
    user_location.innerText = checkNull(data.location, user_location) ? data.location : "Not Available";
    page.innerText = checkNull(data.blog, page) ? data.blog : "Not Available";
    page.href = checkNull(data.blog, page) ? data.blog : "#";
    twitter.innerText = checkNull(data.twitter_username, twitter) ? data.twitter_username : "Not Available";
    twitter.href = checkNull(data.twitter_username, twitter) ? `https://twitter.com/${data.twitter_username}` : "#";
    company.innerText = checkNull(data.company, company) ? data.company : "Not Available";
    searchBar.classList.toggle("active");
    profileContainer.classList.toggle("active");
  } else {
    noResults.style.display = "block";
  }
}
 

function changeInDarkMode(){
    root.setProperty("--lm-bg","#141D2F");
    root.setProperty(" --lm-bg-content","#1E2A47");
    root.setProperty("--lm-text","white");
    root.setProperty("--lm-text-alt","white");
    root.setProperty("--lm-shadow-xl","rgba(70,88,109,0.15)");
    modeText.innerText = "LIGHT";
    modeIcon.SRC = "./assests/images/sun-icon.svg";
    root.setProperty("--lm-icon-bg","brightness(100%");
    darkMode = true;
    console.log("darkmode changed to"+ darkMode);
    localStorage.setItem("dark-mode",true);
    console.log("setting dark mode to false");
    console.log("setting dark mode to true");
}

function changeInLightMode(){
    root.setProperty("--lm-bg","#f6f8ff");
    root.setProperty("--lm-bg-content","FEFEFE");
    root.setProperty("--lm-text","#4B6A9B");
    root.setProperty("--lm-text-alt","#2B3442");
    root.setProperty("--lm-shadow-xl","rgba(70,88,109,0.25)");
    modeText.innerText = "DARK";
    modeIcon.src = "./assests/images/moon-icon.svg";
    root.setProperty("--lm-icon-bg","brightness(100%)");
    darkMode = false;
    console.log("darkMode changed to "+ darkMode);
    localStorage.setItem("dark-mode",false);
    console.log("setting dark mode to false");
}

function init(){
    darkMode = false;
    const value = localStorage.getItem("dark-mode");

    if(value === null){
        console.log("Inside null");
        localStorage.setItem("dark-mode", darkMode);
        changeInLightMode();
    }
    else if(value == "true"){
        console.log("Inside true");
        changeInDarkMode();
    }
    else if(value == "false"){
        console.log("Inside false");
        changeInLightMode();
    }
    getUserData(url + "abhhishhek");
}
init();