Frontend developer: test task

4T4

by Vitaly Volovich

HTML

<div class="container">
  <div class="header">
    <p>Applicaton name</p>
  </div>
  <div class="content">
    <div class="hide userInfo">
      <div class="header">Add new user dialog</div>
      <label for="name">Name 
        <input type="text" name="name" placeholder="Name">
      </label>
      <br>
       <label for="name">Age 
        <input type="text" name="age" placeholder="Name">
      </label>
      <br>  
       <label for="name">Email 
        <input type="text" name="email" placeholder="Name">
      </label>
      <br>
       <label for="name">Registration Date 
        <input type="text" name="regDate" placeholder="Name">
      </label>
      <br>
      <div class="btn btn-center btn-save">Save</div>
    </div>
    <div class="btn btn-add">Add new</div>
    <table id="tab">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th>Registration Data</th>
        <th>Operations</th>
      </tr>
      <tr>
        <td>Mark Davis</td>
        <td>24</td>
        <td>[email protected]</td>
        <td>11/11/2011</td>
        <td><span class="edit">&#9998;</span> <span class="remove">&#174;</span></td>
      </tr>
    </table>
    <div class="pagination">
      <ul class="pager">
        
      </ul>
    </div>
  </div>
</div>

CSS

.container{
  border:1px solid black;
  margin:10px auto;
  width:80%;
  min-height:400px;
}
.header{
  text-align:center;
  background-color:#eee;
  border-bottom:1px solid black;
}
.header p{
  margin:0;
  padding:3px;
}
.content{
  width:80%;
  margin:0 auto;
  padding:20px 0 20px;
}
.userInfo{
  position:absolute;
  margin-left:88px;
  margin-top:-10px;
  background-color:#FFF;
  width:300px;
  min-height:200px;
  border:2px solid #ddd;
  text-align:right;
}
.userInfo .header{
  border-bottom-color:#ddd;
  background-color:#33cccc;
  padding:4px 0;
}
input{
  margin:5px 20px 5px 5px;
}

.edit,.remove{
  cursor:pointer;
  padding:5px;
}
.edit:hover, .remove:hover{
  background-color:#ccc;
  border-radius:50%;
  color:#00F;
}
.btn{
  width:80px;
  height: 30px;
  margin:10px 0;
  background-color:blue;
  color:#FFF;
  text-align:center;
  padding-top:5px;
  cursor:pointer;
}
.btn-center{margin:10px auto;}
.hide{display:none}
#tab{
  width:90%;
  margin:0 auto;
  border-collapse:collapse;
  text-align:center;
}
th, td, #tab{  border:2px solid #ddd;}
th{background-color:#eee;}
td, th{ padding:2px 5px;}

JavaScript

$(".btn").click(function(){
	$(".userInfo").removeClass("hide");
});
$(document).click(function(){
	var item= $(".userInfo");
	if ($(item).hasClass("hide") ) {
  	//else $(item).addClass("hide");
    //alert("A");
    }
   //else alert("S");
  
});