তো কোনো কথা হবে না আজকে জাস্ট আমরা সিম্পল জাভাস্ক্রিপ্ট দিয়ে গিটহাব ফাইন্ডার বানাবো । এটা আসলে কি ? সিম্পল আমরা যেকারোর গিটহাব এর ইউজার নেইম দিবো তার প্রোফাইল ইনফরমেশন চলে আসবে। আমরা কোনো সিএসএস লিখবো না জাস্ট সিম্পল জাভাস্ক্রিপ্ট আর এইচটিএমএল । আমাদের এই কাজটি দুই পর্বে বিভক্ত । আমাদের আজকের পর্বে আমরা মূলত ইউ ইউ আই ডিজাইন তথা front-end এইচটিএমএল এবং সিএসএস নিয়ে আলোচনা করব । পরবর্তী পর্বে আমরা জাভাস্ক্রিপ্ট দিয়ে কিভাবে বাকি কাজ করা যায় সেগুলো নিয়ে আলোচনা করব। তো সিএসএস কে লিখবে ? তো সিএসএস এর জন্য আমরা BootStrap নামক সিএসএস এর একটি ফ্রেমওয়ার্ক ব্যবহার করব । এটির ব্যবহার খুবই সহজ আমরা টুকটাক দেখলেই বুঝতে পারব আমাদের এই পর্বে । তো চলুন শুরু করা যাক ।

তো আমরা ধরে নেই এই আর্টিকেল যারা পড়তেছেন তাদের মোটামুটি বেসিক এইচটিএমএল সম্পর্কে ধারনা আছে । আমরা যারা VS code ব্যবহার করি তারা খুব সহজেই emmet এর মাধ্যমে এইচটিএমএল এর বেসিক Boilerplate code পেয়ে যাব । এইচটিএমএল এর কোড Bootstrap সিএসএস এবং আইকনের জন্য font awesome সিডিএন লিংক পেস্ট করব । পেস্ট করার পর মোটামুটি জিনিসগুলো নিচের কোড স্নিপেট এর মতো দেখা যাবে ।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Github finder app</title>
    <!-- font awesome cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <!-- bootstrap cdn  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

এবার সার্চবক্স এবং টাইটেলসহ ফ্রন্টএন্ড বানানোর পালা। আমরা একটা main ক্লাস container বানাবো। তার মধ্যে টাইটেল এবং সার্চবক্স বসাবো। প্রথমে টাইটেল এর জন্যে h1 ক্লাস নিবো এবং তার মধ্যে বুটস্ট্র্যাপ এর কাস্টম ক্লাস বসাবো। text-center টেক্সট মাঝখানে আনার জন্যে text-success টেক্সটের কালার চেঞ্জ করার জন্যে text-capitalize টেক্সট এর প্রথম অক্ষর বড়হাতের করার জন্যে fw-bolder টেক্সট মোটা বা বোল্ড করার জন্যে mt-4 টপ থেকে মার্জিন দেয়ার জন্যে।

    <main class="container">
        <!-- search section  -->
        <h1 class="text-center text-success text-capitalize fw-bolder mt-4">Search for Github user</h1>
        <div class="input-group mb-4 mt-3 shadow-lg p-3 mb-5 bg-body rounded w-auto">
            <input type="text" class="form-control rounded-pill " placeholder="search github user">
            <button class="btn btn-outline-secondary rounded-pill ms-1"  type="button">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </main>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Github finder app</title>
    <!-- font awesome cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <!-- bootstrap cdn  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <main class="container">
        <!-- search section  -->
        <h1 class="text-center text-success text-capitalize fw-bolder mt-4">Search for Github user</h1>
        <div class="input-group mb-4 mt-3 shadow-lg p-3 mb-5 bg-body rounded w-auto">
            <input type="text" class="form-control rounded-pill " placeholder="search github user">
            <button class="btn btn-outline-secondary rounded-pill ms-1"  type="button">
                <i class="fas fa-search"></i>
            </button>
        </div>
        <!-- showing username found or not -->
        <div id="result"></div>
        <!-- display search result content -->
        <div id="search-result" class="h-50 w-auto text-center"></div>
    </main>
    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

ফ্রন্টএন্ড বানানোর পরে যা দাঁড়ালো। image