dianevinson/sampleindex.html

## sampleindex.html
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
* {
  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 }
    </style>
  </head>
  <body>
 <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" placeholder="Type your message here">
<button id="clickme">Send</button>
</div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script>
    <script>
      $(function () {
        var socket = io();
        $('#clickme').click(function(){
          let name = document.getElementById("name").value
          let color = document.getElementById("color").value
          var date = new Date();
          var message = document.getElementById("message").value;
          let time = (date.getMonth() + 1) +"/" +date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" +date.getSeconds();
          let input = `<span style="color: ${color};">${name}</span>: ${message}<span id="timetext">${time}</span>`
          socket.emit('chat message',input);
          $('#message').val('');
          return false;
        });
        socket.on('chat message', function(msg){
          $('#messages').append(`<li>${msg}</li>`);
          window.scrollTo(0, document.body.scrollHeight);
        });
      });
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Socket.IO chat</title>
	<style>
	* {
	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 }
	</style>
	</head>
	<body>
	<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" placeholder="Type your message here">
	<button id="clickme">Send</button>
	</div>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
	<script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script>
	<script>
	$(function () {
	var socket = io();
	$('#clickme').click(function(){
	let name = document.getElementById("name").value
	let color = document.getElementById("color").value
	var date = new Date();
	var message = document.getElementById("message").value;
	let time = (date.getMonth() + 1) +"/" +date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" +date.getSeconds();
	let input = `<span style="color: ${color};">${name}</span>: ${message}<span id="timetext">${time}</span>`
	socket.emit('chat message',input);
	$('#message').val('');
	return false;
	});
	socket.on('chat message', function(msg){
	$('#messages').append(`<li>${msg}</li>`);
	window.scrollTo(0, document.body.scrollHeight);
	});
	});
	</script>
	</body>
	</html>