Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
53 lines (51 sloc) 2.08 KB
<!doctype html>
<html>
<head>
<title>Tone Visualizer</title>
<meta name="viewport" content="width=device-width">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
body { position: absolute; width: 100%; height: 100%; }
body, input, button { font: 1rem "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#tone-visualizer { width: 100%; }
#current-text { padding: 40px 10px; color: #fff; text-align: center; width: 80%; overflow: hidden; margin-left: auto; margin-right: auto;}
form { width: 80%; max-width: 500px; display: flex; margin-left: auto; margin-right: auto; }
form input { border: 2px solid #ccc; padding: 10px; flex: 1; margin-right: 10px; }
form button { width: 90px; background: #000; border: 2px solid #fff; padding: 10px; color: #fff;}
</style>
</head>
<body>
<div id="tone-visualizer">
<div id="current-text"></div>
<form action="" id="form">
<input id="m" autocomplete="off" />
<button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
// initialize socket
var socket = io();
// get references to dom elements
var form = document.getElementById('form');
var input = document.getElementById('m');
var currentText = document.getElementById('current-text');
var toneVisualizer = document.getElementById('tone-visualizer');
// submit handler
form.addEventListener('submit', function(e) {
e.preventDefault();
// send our request
socket.emit('tone message', input.value);
// clear the input
input.value = '';
return false;
});
// receiving messages - set the current text and background color
socket.on('tone', function(msg) {
currentText.innerText = msg.text;
document.body.style.background = msg.color;
});
</script>
</body>
</html>