New Test

by Andrew Elliott

HTML

<div id="test-form">
  <h2>Add a User:</h2>
  <label for="Username:">
    <input id="username" type="text" name="username" placeholder="Type username here">
  </label>

  <label for="Email:">
    <span id='result'></span>
    <input id="email" type="email" name="email" placeholder="email">
  </label>
  <button id="myButton">add user</button>
  <div id="messageContainer"></div>
  <h2 class="clear">Users:</h2>
  <ul id="users"></ul>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Roboto Condensed', sans-serif;
  background: #59ABE3;
}

#test-form {
  width: 340px;
  min-height: 440px;
  background: #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 0 40px -10px #000;
  margin: calc(50vh - 220px) auto;
  padding: 20px 30px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  background: #ffc0cb;
  padding: 5px;
  margin: 4px;
}

h2 {
  margin: 10px 0;
  padding-bottom: 10px;
  width: 180px;
  color: #78788c;
  border-bottom: 3px solid #78788c;
}

label {
  display: block;
}

label:before {
  content: attr(for);
  display: block;
  margin: 28px 0 0;
  font-size: 14px;
  color: #5a5a5a
}

#test-form input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: none;
  outline: none;
  resize: none;
  border: 0;
  font-family: 'Montserrat', sans-serif;
  transition: all .3s;
  border-bottom: 2px solid #bebed2
}

#test-form input:focus {
  background: #ffed97;
  border-bottom: 2px solid #78788c
}

span#result {
  color: #ca0303;
  font-size: 14px;
  display: -webkit-inline-box;
  padding-top: 8px;
}

button#myButton {
  float: left;
  padding: 8px 12px;
  margin: 8px 0 19px;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #78788c;
  background: 0;
  color: #5a5a6e;
  cursor: pointer;
  transition: all .3s
}

.clear {
  clear: left;
}

button#myButton:hover {
  background: #78788c;
  color: #fff
}

.hide {
  visibility: hidden;
}


/*...

JavaScript

var el = document.getElementById("myButton");
var messageContainer = document.getElementById('messageContainer');
el.onclick = function() {
  addUser(username, email, onSuccess);
}

var lastResponseCode, oldSendFunction;
// store the native send()
oldSendFunction = XMLHttpRequest.prototype.send;
// override the native send()
XMLHttpRequest.prototype.send = function() {
  this.addEventListener("readystatechange", function(readyEvent) {
    lastResponseCode = readyEvent.target.status;
    console.log('readystatechange - set last response code:', lastResponseCode);
  });
  // call the native send()
  oldSendFunction.apply(this, arguments);
}

function onSuccess(result) {
	if (lastResponseCode == 200) {
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    var username = document.getElementById("username").value;
    var email = document.getElementById("email");
    var message = document.getElementById("result").classList;

    document.getElementById("users").innerHTML += '<li>' + username + '</li>';

    if (!filter.test(email.value)) {
      document.getElementById('result').innerHTML += 'Not a valid email';
      email.focus;
      return false;
    } else {
      //I could have cleared the contents of the 'result' span by using something similar to document.getElementById('result').innerHTML=' ' But I figured I'd have more control manipulating the span results using CSS. In this situation we may be better off using a Javascript library like prototype or jQuery, which have methods to do this, as well as functions that can first check if an element already has a class assigned.

      message.add("hide");
    }
  }
  else {
  	//handle response code other than 200 here
  }
}



// Do not modify this function. Add user service wrapper.
function addUser(username, email, callback) {
  var xhr = new XMLHttpRequest();
  var response;
  var success = (!!Math.round(Math.random()));

  if (!success) {
    response = JSON.stringify({
   ...