Request.JSON

sending a JSON request to the jsFiddle backend. Later on parse and display the data.

by jimmyt1001

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>
  <span id="messageContainer"></span>
  <input id="email" type="email" name="email" placeholder="email">
  </label>
  <button id="myButton">add user</button>
  <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 {
  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, span#messageContainer  {
    color: #ca0303;
    font-size: 14px;
    display: -webkit-inline-box;
    padding-top: 8px;
}

span#messageContainer  {
    display:block;
}

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;
  }
 ...

JavaScript

/*
Assignement:

# HTML
Complete the HTML to have semantic and compliant markups.

# PURE JAVASCRIPT
Dynamically add a user to the users list.
1. Highlight the email input when a user enters an invalid email address and display following message: "please enter a valid email address" in red.
2. Use the addUser function to submit the user's data.
3. If the ajax request returns an error, display the error message in red.
4. Display the newly added user in the users list when the request was successful. 

# BONUS
- make WCAG compliant
- add some CSS3 properties

*/




// START YOUR CODE HERE

var el = document.getElementById("myButton");
el.onclick = function() {
  addUser(username, email, onSuccess);
}
var messageContainer = document.getElementById('messageContainer');
function onSuccess(result) {
  if (result.error) {
      messageContainer.innerHTML = "An Error occurred";
      setTimeout(function() {
          messageContainer.innerHTML = "";
      }, 4000);
  } else {
    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)) {
      messageContainer.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");
    }
  }
}


// END YOUR CODE HERE




// Do not modify this...