JSFiddle - React, Tailwind, and code Playground
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
});
};