<form>
  <input type="text" />
  <button>Send</button>
</form>
<button id="btn-clear">Clear</button>
<div>  
</div>

var socket = io.connect('https://socket-magic.herokuapp.com/');
var form = document.querySelector('form');
var panel = document.querySelector('div');
var btnClear = document.querySelector('#btn-clear');

btnClear.addEventListener('click', function() {
  panel.innerHTML = '';
});

socket.on('data', function(data) {
  var p = document.createElement('p');
  p.textContent = data.text;
  panel.appendChild(p);
});


form.addEventListener('submit', function(e) {
  e.preventDefault();
  var input = e.target.querySelector('input');
  socket.emit('data', { text: input.value });
});