তো কোনো কথা হবে না আজকে জাস্ট আমরা সিম্পল জাভাস্ক্রিপ্ট দিয়ে গিটহাব ফাইন্ডার বানাবো। এটা আসলে কি ? সিম্পল আমরা যেকারোর গিটহাব এর নাম দিবো তার প্রোফাইল ইনফরমেশন চলে আসবে। আমরা কোনো কঠিন সিএসএস লিখবো না জাস্ট সিম্পল জাভাস্ক্রিপ্ট আর এইচটিএমএল।

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Github finder app</title>
    </head>
    <body>
        <div class="container">
            <label for="temp">please enter the github username</label><br/>
            <input type="text" name="temp" id="githubUsername"><br/>
            <button type="button" name="finder" id="github">Search</button><br/>
            <div id="resultContainer"></div>
        </div>
       <script src="script.js"></script>
    </body>
</html>

const showProfile =() => {
    let username = document.getElementById("githubUsername").value;
    if (username == ""){
        alert("please enter github username")
    }
    else{
    const api = "https://api.github.com/users/"+username
    fetch(api).then(res=> res.json()).then(data =>{
        if(data.message){
            console.log("User not found") 
            document.getElementById("resultContainer").innerHTML = `
                <p>User not found</p>
            `
        }else{
    document.getElementById("resultContainer").innerHTML = `
        <img src="${data.avatar_url}" style="width:20%">
        <p>Name: ${data.name}</p>
        <p>Location: ${data.location}</p>
        <p>Bio: ${data.bio}</p>
        `
        }
        
    }).catch(e=>{
        console.log(e)
    });   
}
};

document.getElementById("github").addEventListener('click', showProfile);