JSFiddle - React, Tailwind, and code Playground

by Rikin Patel

HTML

<form id="myForm" onsubmit="onFormSubmit(); return false;">
<h2>Add a User:</h2>
    <span class="isa_error" id="error"></span>
</br>
    <input id="username" type="text"   name="username" placeholder="name" required="required"></input>
    
<input type="email" id="email" oninvalid="this.setCustomValidity('please enter a valid email address')"  name="email" oninput="setCustomValidity('')" placeholder="email"></input>
    
<button>add user</button>
<h2>Users:</h2>
<ul id="users">
    
</ul>
</form>

CSS

.isa_error {
    color: #D8000C;    
}

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
function onFormSubmit(){
    
//Clear error message if exist.
document.getElementById("error").innerHTML = "";

//Submit user details.
    var username = document.getElementById("username").value;
    var userEmail = document.getElementById("email").value;
    addUser(username, userEmail, callbackFunction);
    
return false;   
}

function callbackFunction(data) {

    if (data.success) {
        //Add user details in userlist.
        addElement('UserName: ' + data.user.username + ', Email: ' + data.user.email);

        //clear input controls
        document.getElementById("myForm").reset();
    }
    else {
        //Display error message.
        document.getElementById("error").innerHTML = data.error;
    }
}

function addElement(datatext) {
    //Add new user in user list.
    var newLi = document.createElement("li");
    var text = document.createTextNode(datatext);

    newLi.appendChild(text);
    var ulnew = document.getElementsByTagName('ul')
    ulnew[0].appendChild(newLi)
}

// 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:...