StudentCodingHUB

Use programming to create innovative things.

    • new post

    Monday, 21 October 2019

    Home css html javascript sample-code Chat Room using HTML, CSS, JAVASCRIPT

    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

    Read more
    Labels: , , ,

    No comments:

    Post a Comment