EMPDATABASE

final

by PRAGADEESH S

HTML

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="divtablemain.css">
	<script src = "divtablemainchangedtuesday1.js"></script>
	<title> Employee Database</title>
</head>
<body>
  <header>
    <h3>
EMPLOYEE DATABASE 
	</h3>
  </header>
<div id="wrap">  
  <div class="buttons1">
		
		<input type="button"  id="perm" class = "col-m-12 col-3" onclick="permEmps()" value="Permanent">
		<input type="button"  id="temp" class = "col-m-12 col-3" onclick="tempEmps()" value="Temporary"><br>
   </div>	
		
			<input type="button" id="add" class = "col-m-12 col-3" onclick="hide()" value="Add Employee">
			<div class="addJson">
				<input type="button" id="jsonText" class = "col-m-12 col-3" onclick="getJson()" value="Get JSON">
			</div>
			<div class = "jsonSource">
				<input type="button" id="jsonSource" class = "col-m-12 col-3" onclick="jsonSource()" value="Sources">
			</div>
		
		
		
		<p id ="para"></p>
		<div id="showtable" class = "col-m-12 col-7">
			<div id ="permTable"></div>
			<div id ="tempTable"></div>
			
		</div>
		
		<div id="jsonTextArea">
			<form name="jsonForm">
				<textarea  disabled id = "jsonTextAreaId" class = "jsonTextArea col-m-12" name = "jsonText1" placeholder = "JSON Text..."></textarea>
				<form name="jsonForm1">
					<textarea   id = "jsonSourceAreaId" class = "jsonSourceArea col-m-12" name = "jsonSourceArea1" placeholder = "Add JSON objects"></textarea>
				</form>
			</form>
				<input type="button" id="addJson" class = "col-m-12 col-3" onclick="addJson()" value= "Add">
				<input type="button" id="jsonBack" class = "col-m-12 col-3" onclick="back()" value= "Back">
		</div>
			
			
		
		
		<div id="showform">
			<div class="forms">
				<form name="inputform" id="form" action="#" method="post" >
					<input type="hidden" id="pid" name="Pid" placeholder="Pid" value="1002">
					<input type="hidden" id="tid" name="Tid" placeholder="Tid"...

CSS

/*****************************************************************************************************/
/*****************************************Media queries***********************************************/

/********* For mobile phones:   320px**********************/
[class*="col-"] {
    width: 100%;
}

body{
   background-color:#6699ff;
}
   
header{
  text-align:center;
  font-size:20px;
}
	
input[type=text], input[type=email] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}
input[type=button],input[type=reset]
 {
    background-color: grey; 
    border: 2px solid black;
    color: white;
    padding: 8px 22px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    width:100%;
}

#sub,#res,#add,#jsonText,#jsonSource,#addJson,#jsonBack
 {
    background-color: #012868;
	width:100%;
	margin-top:5px;
    border: 2px solid black;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
}
.buttons1{
		margin-bottom:10px;
}

#sub:hover ,#res:hover,#add:hover,#perm:hover,#temp:hover,#jsonText:hover,#jsonSource:hover,#addJson:hover,#jsonBack:hover{
	border:2px solid white;
    
}

.addJson,.jsonSource{
	display:inline;
	width : 100%;
}
img:hover {
    cursor: pointer;
}



/***********************************divTable**************************************/
#showtable{
	width:100%;
	clear:left;
}

/***********************************Heading******************************************/

#idCell,#tidCell{
	color: black;
	background-color:white;
	font-weight: bold;
	width: 17%;
	border-left: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 3px;
	text-align:center;
	float: left;	
	box-sizing: border-box;
	}

#nameCell,#tnameCell,#emailCell,#temailCell{
	display:none;
}

#deptCell,#tdeptCell{
	color: black;
	background-color:white;
	font-weight: bold;
	width:...

JavaScript

//th and fv :tableFormVisibility = 1 true; tv and fh: tableFormVisibility = 2 false
//perm-->Permanent;temp-->temporary							
var tableFormVisibility;
var permtDataArrayLength;
var tempDataArrayLength;
var permClickCount = 0;		
var termpClickCount = 0;
var permTempActive;
var permData = [];
var tempData = [];
var rowCount = 0;
var rowCountt = 0;
var permHtml = "";
var tempHtml = "";
var jsonPermTemp = true;
var jsonsourceperm = true;
var insideJsonSource = false;
/*var permHtml = "<tr><th>Id</th><th>Name</th><th>Email</th><th>Dept</th><th>Package</th></tr>";
var tempHtml = "<tr><th>Id</th><th>Name</th><th>Email</th><th>Dept</th><th>Package</th></tr>";*/
			
//*********object*********************
function employee(id,name, email, dept, salary){
	this.id = id;
	this.name = name;
	this.email = email;
	this.dept = dept;
	this.salary = salary;
}
				
//***************addRow*****************
function addRow(){
if(!validate()){}
 else{
	//permClickCount++;
	tableFormVisibility = false;
	hide();
	if(permTempActive == 1){
		permAddRow();
	}
	else {
		tempAddRow();
		}
	}
}
					
//******add perm emp*******
function permAddRow(){
	idvalue = incrementPValue();
	var namevalue = document.getElementById("name");
	var emailvalue = document.getElementById("email");
	var deptvalue = document.getElementById("dept");
	var packagevalue = document.getElementById("package");
	var genEmployee = new employee(idvalue,namevalue.value,emailvalue.value,deptvalue.value,packagevalue.value);
	permData.push(genEmployee);
	divTable();
	/*permHtml += "<tr><td>"+permData[permtDataArrayLength].id+"</td><td>"+permData[permtDataArrayLength].name+"</td><td>"+permData[permtDataArrayLength].email+"</td><td>"+permData[permtDataArrayLength].dept+"</td><td>"+permData[permtDataArrayLength].salary+"</td></tr>";*/
	emailvalue.value="";
	namevalue.value="";
	deptvalue.value="";
	packagevalue.value="";
}

//******add temp emp*******
function tempAddRow(){
	idvalue = incrementTValue();
	var namevalue =...