Monday, 21 October 2019

Chat Room using HTML, CSS, JAVASCRIPT

Create a Chat Room demo Application


HTML,   CSS,    JAVASCRIPT


<!DOCTaYPE html>
<html>
<head>
  <title>Chat Bot</title>

  <style>
    .container{
      border:2px solid green;
      width:90%;
      margin: auto;
      border-radius:12px;
      height: 90%;
    }
    .cont1{
      margin: auto;
      width:95%;
      border-radius:12px;
      height: 90%;
      overflow-x: auto;
    }

     .heading{
      border:1px solid black;
      border-radius:12px;
      text-align:center;
      margin:2px

     }

     #txtbox1{
      border:2px solid gray;
      width: 70%;
      height:20px;
      padding: 20px;
      margin:auto;
      border-radius:12px;
    }
    .footer{
      width:90%;
      position: absolute;
      bottom: 10px;
    }
    .btn{
      padding: 12px;
      background-color: #008CBA;
      border-radius: 12px;
    }
    .senderStyle{
      background-color:#008060;
      color:white;
      padding:5px;
      width: 80%;
      float: right;
      margin-top: 1px;
      border-radius: 12px;
    }
    .receiverStyle{
      background-color:#cccccc;
      color:#000000;
      padding:5px;
      width: 80%;
      float: left;
      margin-top: 1px;
      border-radius: 12px;
    }
#chatroot{

 }

   </style>

</head>

<body>

<h1 style="text-align:center;">Chat Room</h1>
  <div class="container">
    <div class="cont1">
      <div id="chatroot"></div>
    </div>

    <div class="footer">
      <input type="text" id="txtbox1">
      <input  class="btn" type="button"value=">>" onclick="sendMsg()">
      <input  class="btn" type="button"value="<<" onclick="sendMsg2()">
    </div>
  </div>

  <script>
    function sendMsg(){
      var msg=document.getElementById("txtbox1").value;
      addChatroot(msg,true);
      document.getElementById("txtbox1").value="";
    }

     function sendMsg2(){
      var msg=document.getElementById("txtbox1").value;
      addChatroot(msg,false);
      document.getElementById("txtbox1").value="";
    }

     function addChatroot(msg,isSender){
      var x = document.createElement("div");
      if(isSender){
        x.className = 'senderStyle';
      }
      else {
        x.className = 'receiverStyle';
      }
      var t = document.createTextNode(msg);
      x.appendChild(t);
      document.getElementById("chatroot").appendChild(x);
    }
  </script>

</body>
</html>

 RUN CODE

No comments:

Post a Comment