JSFiddle - React, Tailwind, and code Playground

by Matthew Singleton

HTML

<div class="tasteTheRainbow">
        

     <div id="chatContainer">

     </div>

     <div id="chatControls">
     <textarea id="chatTextBox" placeholder = "Enter your message here..."></textarea>
     <button id="chatSend">Send</button>
     </div>


            	  

</div>

CSS

.tasteTheRainbow{
	background-image:url(../assets/fivePix.png);
	background-repeat:repeat;
	position: absolute;
	
	background: url(../assets/tombrady1.jpg) no-repeat center center fixed;
	
	-webkit-background-size: cover;
	background-size: cover;
	display: block !important;
	
}
.orNot{
	background-image:url(../assets/fivePix.png);
	background-repeat:repeat;
	position: absolute;
	background: url(../assets/tombrady2.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	background-size: cover;
}


#chatContainer{
	width: 95%;
	height: 50px;
	background: url(../assets/chatTile.png) repeat;
	border: 1px solid #333;
	margin: 0 auto;
	border-radius: 5px;
	margin-top: 10px;
	overflow-y: scroll !important;
	padding: 5px;
}
#chatTextBox{
	resize: none;
	width: 65%;
	height: 35px !important;
	float: left;
	opacity: .9;
}
#chatControls{
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
}
#chatSend{
	resize: none !important;
	width: 50%;
	height: 35px !important;
	display: inline-block;
	max-width: 30%;
	float: right;
	opacity: .9;
	padding: 5px;
}

JavaScript

var canned = ['Ok, how is this?']

$(function() {
  
  // grab a reference to the chat
  var chat = $("#chatContainer")
  
  // add a click handler to send messages
  $("#chatSend").click(function() {

    var username = "<span class=chatUsername>CNN_News: </span>"
      , newMessage = $("#chatTextBox").val() + '<br>'
      , delay = 4000
          
    // reset the input
    $("#chatTextBox").val("")

    // render the chat
    chat.append(username + newMessage)
    chat.scrollTop(chat.prop("scrollHeight"))
    
    // set a timeout to send a canned response

    setTimeout(function() {
      chat.append('StarkFan: ' + canned.shift() + '<br>')
      chat.scrollTop(chat.prop("scrollHeight"))
    }, delay)
        
  // end of click handler
  })
})