Request.JSON

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

by Rikin Patel

HTML

<h2>Add a User:</h2>
<input type="text" name="username" placeholder="name">
<input type="email" name="email" placeholder="email">
<button>add user</button>
<h2>Users:</h2>
<ul id="users"></ul>

JavaScript

/*
Assignement:

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

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

BONUS:
- no jQuery
- add some CSS3 properties

*/


// START YOUR CODE HERE

// END YOUR CODE HERE




// Do not modify this function. Add user service wrapper.
function addUser(username, email, callback) {
    var response,
        success = (!!Math.round(Math.random()));
    
    if(!success){
        response = JSON.stringify({
            success: success,
            error: "Oups, something went wrong!"
        });
    } else {
        response = JSON.stringify({
            success: success,
            user: {
                username: username,
                email: email
            }
        });   
    }
    
    $.ajax({
        url: '/echo/json/',
        type: "post",
        data: {
            json: response
        },
        success: callback
    });
};