Live url TBA, DigitalOcean locked my account immediately after registration and haven’t got back to me yet.
html & css:
<html>
<head>
<title>CH4T</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="chat.js"></script>
<script type="text/javascript">
</script>
</head>
<body id="body">
<div id=main>
<input type="text" id="message" name="message">
<input type="submit" value=">" onclick="sendmessage(document.getElementById('message').value);">
<div id="messages"></div>
</div>
<style>
#main {
/*margin:50px;*/
}
.newBg{
position:absolute;
top:0;
right:0;
z-index: -1;
width:100vw;
height:90vh;
}
input {
/*width:100%;*/
border-radius: 2px;
}
button {
border-radius: 2px;
}
.msgBox {
position:relative;
float:left;
display:block;
width:100%;
padding:5px;
margin:5px 10px 0 0;
background:rgba(0,0,0,0.05);
border-radius: 2px;
}
</style>
</body>
</html>
js:
var socket = io.connect();
socket.on('connect', function() {
console.log("Connected");
});
// Receive from any event
socket.on('chatmessage', function(data) {
console.log(data);
//colors
var colors = ["red", "orange", "yellow", "green", "blue", "purple", "pink", "brown", "black", "white"];
for (var i = 0; i < colors.length; i++) {
if (data == colors[i]) {
var body = document.getElementById("body");
body.style.background = colors[i];
}
}
//bg images
if (data == "zoom") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/zoom.gif')";
document.body.appendChild(newBg);
}
if (data == "blood") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/blood.gif')";
document.body.appendChild(newBg);
}
if (data == "cat") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/cat.gif')";
document.body.appendChild(newBg);
}
if (data == "explode") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/explode.gif')";
document.body.appendChild(newBg);
}
if (data == "kirby") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/kirby.gif')";
document.body.appendChild(newBg);
}
if (data == "pizza") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/pizza.gif')";
document.body.appendChild(newBg);
}
if (data == "werq") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/professional.gif')";
document.body.appendChild(newBg);
}
if (data == "rain") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/rain.gif')";
document.body.appendChild(newBg);
}
if (data == "snow") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/snow.gif')";
document.body.appendChild(newBg);
}
if (data == "sparkle") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/sparkle.gif')";
document.body.appendChild(newBg);
}
if (data == "water") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/water.gif')";
document.body.appendChild(newBg);
}
if (data == "wizard") {
// document.body.style.backgroundImage = "url('img/zoom.gif')";
var newBg = document.createElement("newBg");
newBg.className = "newBg";
newBg.style.backgroundImage = "url('img/wizard.gif')";
document.body.appendChild(newBg);
}
if (data == "nothing") {
var thisBg = document.getElementsByClassName("newBg");
document.body.removeChild(thisBg);
}
var msgBox = document.createElement("msgBox");
msgBox.className = "msgBox";
msgBox.innerHTML = data;
document.getElementById("messages").appendChild(msgBox);
});
var sendmessage = function(message) {
console.log("chatmessage: " + message);
socket.emit('chatmessage', message);
};