main.js

function submit () {
  document.getElementById('form-error').classList.add('hidden')
  document.getElementById('form-success').classList.add('hidden')
  var XHR = new XMLHttpRequest();
  var FD  = new FormData();
  var payload = {
    name: document.getElementById('domain-input').value
  }
  XHR.onreadystatechange = function () {
    if (XHR.readyState === 4 && XHR.status === 400) {
      var json = JSON.parse(XHR.responseText);
      document.getElementById('form-error').innerHTML = 'Error: ' + json.error
      document.getElementById('form-error').classList.remove('hidden')
    } else if (XHR.readyState === 4 && (XHR.status === 200 || XHR.status === 204)) {
      document.getElementById('form-success').innerHTML = 'Success: domain ' + payload.name + ' was submitted successfully :)'
      document.getElementById('form-success').classList.remove('hidden')
    }
  };
  XHR.open('POST', '/api/domains', true);
  XHR.setRequestHeader("Content-Type", "application/json");
  XHR.send(JSON.stringify(payload));
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('domain-form').addEventListener('submit', function (event) {
    event.preventDefault();
    submit()
  })
  document.getElementById('domain-input').addEventListener('keydown', function (event) {
    var keypressed = event.keyCode || event.which;
    if (keypressed == 13) {
      submit()
    }
  });
});