CSStemplate.css

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
  }
  body {font: 13px Helvetica, Arial;}
  #input {
    background:#000;
    padding: 3px;
    position: fixed;
     bottom:0;
    width:100%;
  }
  #message {
    width: 90%;
    border:0;
    padding: 10px;
    margin-right: .5%;
  }
  #clickme {
    width:9%;
    background: rgb(130, 224, 255);
    padding: 10px;
  }      
  #timetext {
    padding-right: 10px;
    position: fixed;
    right: 0;
  }
  #nameInput {
    background:#000;
    padding: 3px;
    width: 100%;
    justify-content: center; 
  }
  #name { width:50%; border:0;padding:7px;margin-right:.5%;}
  #color {width:20%; border:0px; height:20px; padding:2px;}
  #messages { list-style-type: none; margin: 0; padding: 0; }
  #messages li { padding: 5px 10px; }
  #messages li:nth-child(odd) { background: #eee; }
  #messages { margin-bottom: 40px }

HTMLtemplate.html

<div id="nameInput">
          <input type="text" id="name" autocomplete="off" placeholder="Name" value="Anonymous"> 
          <input type="color" id="color" value="#aa00ff">
       </div>
<ul id="messages"></ul>
<div id="input">
<input type="text" id="message">
<button id="clickme">Click Here</button>
</div>

jstemplate.js

$('#clickme').click(function(){
  var date = new Date();
   let name = document.getElementById("name").value;
      let color = document.getElementById("color").value;
  var message = document.getElementById("message").value;
  let time = date.toLocaleString()
  let input = `<span style="color: ${color};">${name}</span>: ${message} <span id="timetext">${time}</span>`
  
  let newMsgInDatabase = yourDatabase.push();
  newMsgInDatabase.set(input); //from socket.emit to database.push
  $('#message').val(''); //sets message bar back to being empty after you press send
  return false;
});

yourDatabase.on('child_added', function(msgObj){
  let msg = msgObj.val();
$("#messages").append(`<li>${msg}</li>`);
  window.scrollTo(0, document.body.scrollHeight);  
});