Created
June 17, 2020 20:46
-
-
Save dianevinson/46e4d754d55bf4e1518255c54b308d85 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment