JSFiddle - React, Tailwind, and code Playground

by yudhir bhattarai

HTML

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>
<h2>Add a User:</h2>
<div id="err">

</div>
<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>
</body>
  
</html>

CSS

.errStyle {
  color: red;
}

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

document.getElementsByTagName("button")[0].addEventListener("click",function(event){
var email = document.getElementsByTagName("input")[1];
if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value))){
document.getElementById("err").innerHTML = "please enter a valid email address";
document.getElementById("err").className = "errStyle";
email.focus();
event.preventDefault();
return;

}else{
    document.getElementById("err").innerHTML = "";
}
    var username = document.getElementsByTagName("input")[0].value;
  var email = document.getElementsByTagName("input")[1].value;
  addUser(username,email,function(response){
    if(response.success){
        var users = document.getElementById("users");
      var userLi = document.createElement("li");
      userLi.innerHTML = response.user.username+"-"+response.user.email;
      users.appendChild(userLi);
      document.getElementById("err").innerHTML = "";
      console.log(users);
    }else{
    var err = document.getElementById("err");
        err.innerHTML = response.error;
      err.className = "errStyle";
    }
  })
});
// END YOUR CODE HERE




// Do not modify this function. Add user service wrapper.
function addUser(username, email, callback) {
    var xhr = new XMLHttpRequest();
    var response;
    var success = (!!Math.round(Math.random()));
    
    if (!success){
        response = JSON.stringify({
           ...