Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style>
body {
    display: flex;
    justify-content: center;
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    font-size: 1em;
    color: #32465a;
}
p,ol,ul,li{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}
ol,ul{list-style:none}
.wrapper {
    float: right;
    background: #e8efef;
    width: 35%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

.wrapper .message-content {
    height: auto;
    min-height: calc(100% - 93px);
    max-height: calc(100% - 93px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.wrapper .message-content::-webkit-scrollbar {
    width: 5px;
    background: transparent;
}
.wrapper .message-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}
.wrapper .message-content ul li {
    display: inline-block;
    clear: both;
    float: left;
    margin: 5px 15px;
    width: calc(100% - 25px);
    font-size: 0.9em;
}
.wrapper .message-content ul li:nth-last-child(1) {
    margin-bottom: 20px;
}
.wrapper .message-content ul li.received img {
    margin: 6px 8px 0 0;
}
.wrapper .message-content ul li.received p {
    background: #fff;
    color: #111;
}
.wrapper .message-content ul li.sent img {
    float: right;
    margin: 6px 0 0 8px;
}
.wrapper .message-content ul li.sent p {
    background: #0174AD;
    float: right;
    color: #fff;
}
.wrapper .message-content ul li img {
    width: 22px;
    border-radius: 50%;
    float: left;
}
.wrapper .message-content ul li p {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 10px;
    max-width: 300px;
}
.wrapper .msg-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99;
}
.wrapper .msg-box .wrap {
    position: relative;
}
.wrapper .msg-box .wrap input {

    float: left;
    border: none;
    width: calc(100% - 90px);
    padding: 11px 32px 10px 8px;
    font-size: 0.8em;
    height: 20px;
    color: #32465a;
}

.wrapper .msg-box .wrap input:focus {
    outline: none;
}

.wrapper .msg-box .wrap button {
    float: right;
    border: none;
    width: 50px;
    padding: 12px 0;
    cursor: pointer;
    background: #0174AD;
    color: #f5f5f5;
}
.wrapper .head-img {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f9f9f9;
}
.wrapper .head-img img {
    width: 40px;
    border-radius: 50%;
    float: left;
    margin: 9px 12px 0 9px;
}
.wrapper .head-img p {
    float: left;
}
        input[type="text"]{

  background-color : #d1d1d1;

}
        </style>
</head>
<body>

<div class="wrapper" id="users">
    <div class="head-img">

        <p id = "chatdesc"></p>
    </div>
    <div class="message-content" id = "mes">
        <ul>

            <div v-for="(message,index) in messages " >


            <li v-bind:class="{sent:message.iamAuthor,received: !message.iamAuthor}">

                <p> {{ message.text }}</p>
                  <span class="time_date"> {{ message.date }} - {{ message.author }}</span>


            </li>
            </div>
        </ul>
    </div>
    <div class="msg-box">
        <div class="wrap">
            <input type="text" id="message-txt" placeholder="Enter your message..."  />
            <button  v-on:click="send()"><i class="fa fa-paper-plane" aria-hidden="true" ></i></button>
        </div>
    </div>
</div>

<script >

$( document ).ready(function() {
    // alert( "ready!" );
    var objDiv = document.getElementById("mes");
objDiv.scrollTop =objDiv.scrollHeight - objDiv.clientHeight;
//document.getElementById("chatdesc").innerHTML = "   Chat of course";
});
function sentMessage() {
    message = $("#message-txt").val();
    if ($.trim(message) == '') {
        return false;
    }
    $('' + message + '').appendTo($('.message-content ul'));
    $('#message-txt').val(null);

    $(".message-content").animate({scrollTop: $(document).height()}, "fast");
}
$('.submit').click(function () {
    sentMessage();
});

$(window).on('keydown', function (e) {
    if (e.which == 13) {
        sentMessage();
        return false;
    }
});


var vm = new Vue({
  el: '#users',
  data: {
    messages: [
        {text:"When you're backed against the wall, break the god damn thing down.",author: "",date: "",iamAuthor:true},
        {text:"When you're backed against the wall, break the god damn thing down.",author: "",date: "",iamAuthor:false},
        {text:"ddqqw",author: "",date: "",iamAuthor:true}
    ]
  },
  mounted:function(){
  //      alert("rgr");
       $.ajax({
             headers: { "X-CSRFToken":'{{ csrf_token }}'},
           url: '',
           type: 'get', // This is the default though, you don't actually need to always mention it
           data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}'
           },
           success: function (data) {

           }.bind(this),
           failure: function (data) {
               alert('Got an error dude');
               //alert(JSON.stringify(data));

           }
       });
  },
  methods:{
        send(){
             var objDiv = document.getElementById("mes");
objDiv.scrollTop =objDiv.scrollHeight - objDiv.clientHeight;
            var value = document.getElementById("message-txt").value

            if(value &&  (value.length !== value.split(" ").length-1)){
               // alert("NOR Empty");
                this.messages.push(    {text:value,author: "",date: "",iamAuthor:true})
            }
            else{
               // alert("empty")
            }

        }
  }})
</script>

</body>
</html>