JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

HTML

<body>
    <form>
<table class="center">
    <tr>
        <td>Name :</td><td><input type="text" id="name" name="name"></td>
    </tr>    
    <tr>
        <td>Age :</td><td><input type=text id=age name=age></td>
    </tr>    
    <tr>
        <td>Email :</td><td><input type=text id=email name=email></td>
    </tr>
    <tr>
        <td>Phone :</td><td><input type=text id=phone name=phone></td>
    </tr>    
    <tr>
        <td>Date of Joining :</td><td><input type=text id=doj name=doj></td>
    </tr>    
    <tr>
        <td>Position :</td><td><input type=text id=position name=position></td>
    </tr>   
   
        <tr>
            <td><br><br> <input type="button" onclick="validate()" value="Add" /></td>
            <td><br><br> <input type="reset" name="add" value="Cancel" /> </td>
        </tr>
 </table> 
                </form >
 <br><br>
         <table id="record" class="centered" border="1px">
             <tr >
                 <th>Name</th>  <th>Age</th>  <th>Email</th>  <th>Phone</th>  <th>DOJ</th>  <th>Position</th>
             </tr>
        </table>
</body>

CSS

table.center {
    margin-left: auto;
    margin-right: auto;
     padding:10px;
}
.centered{
    width:100%;
    border:1px;
}

JavaScript

function validate()
{
   // alert("helllo");
    var name=document.getElementById("name").value;
    var age=document.getElementById("age").value;
    var email=document.getElementById("email").value;
    var doj=document.getElementById("doj").value;
    var position=document.getElementById("position").value;
    var phone=document.getElementById("phone").value;
    var allField=[];
    allField.push(name);
    allField.push(age);
    allField.push(email);
    allField.push(doj);
    allField.push(position);
    allField.push(phone);
    // alert(allField);
    for(var i=0;i<allField.length;i++)
        {
        	if(allField[i] ==="")
    		{
            	alert("Please fill all the fields" );
                break;
            } 
        }
    var temp=document.getElementById("record").innerHTML;
temp+="<tr><td>"+name+"</td>"+"<td>"+age+"</td>"+"<td>"+email+"</td>"+"<td>"+phone+"</td>"+"<td>"+doj+"</td>"+"<td>"+position+"</td></tr>";
  //  alert(temp);
    document.getElementById("record").innerHTML=temp; 
    
    
                document.getElementById("name").value="";
                document.getElementById("age").value="";
                document.getElementById("email").value="";
                document.getElementById("doj").value="";
                document.getElementById("position").value="";
                document.getElementById("phone").value=""; 
     

} 

/*

*/