bootstrap card - index

bootstrap_alert.html

<div id="chatEkrani">
                        <div class="row">
                            <div id="mesajAlani bg-white" class="col-md-12">
                                <div class="d-flex">
                                    <div class="alert alert-dark" role="alert">
                                        <b>@kizildas</b> Bu mesaj karşı taraftan geldi!
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <div class="alert alert-info" role="alert">
                                        Bu mesaj sizin tarafınızdan gönderildi! <b>...</b>
                                    </div>
                                </div>
                            </div>
                            <div id="yeniMesajAlani" class="col-md-12" style="position: absolute;bottom: 10;">
                                <div class="row">
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" id="mesaj"
                                            placeholder="Mesaj yazınız.." />
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button" class="form-control btn btn-success">Gönder</button>
                                    </div>
                                </div>
                            </div>
                        </div>
</div>

card_index.html

<div class="row">
        <div class="container">
            <div class="card bg-light" style="height:100%;">
                <div class="card-header">
                    Sohbet Uygulaması
                </div>
                <div class="card-body" style="max-height: 80%;overflow-y: auto;">
                    <!-- Giriş ekranı tasarımı başlangıcı -->
                    <div id="girisEkrani">
                        <div class="row">
                            <div class="col-md-4 offset-md-4">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="kullanici_adi">@</span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="Kullanıcı adı giriniz" aria-label="Kullanıcı adı giriniz"
                                        aria-describedby="kullanici_adi" id="kadi">
                                </div>
                                <button type="button" class="form-control btn btn-success">Giriş Yap</button>
                            </div>
                        </div>
                    </div>
                    <!-- Giriş ekranı tasarımı bitiş -->
                </div>
            </div>
        </div>
    </div>

firebase_realtimedb_sample.js

function saveUser(){
    var username = $("#user").val();
    if(username != ""){
        var userId = firebase.database().ref("users/").push().key; //random userkey
        firebase.database().ref("users/"+userKey).set({
            username: username,
            userid: userId
        });
        $("#loginPane").hide();
        $("#chatPane").show();
    }else{
        alert("Username cannot be blank!");
    }
}

google_firebase_load_messages.js

function loadChat() {
    var query = firebase.database().ref("chats");
    var username= $("#username").val();
    query.on('value', function (snapshot) {
        $("#messageArea").html("");
        snapshot.forEach(function (childSnapshot) {
            var data = childSnapshot.val();
            if (data.from == username) {
                var message = `<div class="d-flex justify-content-end">
                <div class="alert alert-info" role="alert">
                    `+ data.message + ` <b>@` + data.from + `</b>
                      </div>
                 </div>`;
                $("#messageArea").append(message);
            } else {
                var message = `<div class="d-flex">
                                    <div class="alert alert-dark" role="alert">
                                      <b>@`+ data.from + `</b> ` + data.message + `
                                  </div>
                           </div>`;
                $("#messageArea").append(message);
            }
            $(".card-body").scrollTop($('.card-body')[0].scrollHeight - $('.card-body')[0].clientHeight);
        });
        
    });
}