JSFiddle - React, Tailwind, and code Playground

by brianjsullivan

HTML

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

CSS

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

JavaScript

/*
Requirements:
- Use ajax via the add_user function to submit the user entered data.
- You can assume the service will respond with 200 status.
- Display an error in red at the top of the form when the add user service responds with success property with a value of false. 
Use the error property as the message.
- Display new users in the users list when the response returns a success property
- Highlight the email input when a user enters an invalid email address. Also, display the text "please enter a valid email address" in red.
NOTE: The service will not provide this validation functionality, and will accept invalid emails.
*/

$(document).ready(function(){
    $('button').click(function(){
        $userInput = $('username').val();
        $emailInput = $('email').val();
        
        addUser($userInput,$emailInput,function(response){
            $('users').html(JSON.stringify(response));
        });
    });
    
    
});

//example usage.
addUser('john', 'smith', function(response){
    console.log('response is: ' + JSON.stringify(response)); 
});

/*
################################### DO NOT MODIFY BELOW THIS LINE ##########
############################################################################
*/
// Add user service wrapper.
function addUser(username, email, callback) {
    var response;
   
    if(username === "Error"){
        response = JSON.stringify({
            success: false,
            error: "Error is not acceptable username."
        });
    } else {
        response = JSON.stringify({
            success: true,
            user: {
                username: username,
                email: email
            }
        });   
    }
    
    $.ajax({
        url: '/echo/json/',
        type: "post",
        data: {
            json: response
        },
        success: callback
    });
};