EMPDATABASE

Thursday changes

by PRAGADEESH S

HTML

<script src = "External.js"></script>
	<title> Employee Database</title>
</head>
<body>
  <header>
    <h3>
EMPLOYEE DATABASE
	</h3>
  </header>
  	<div class="buttons1">
		
		<input type="button"  id="perm" onclick="permEmps()" value="Permanent">
		<input type="button"  id="temp" onclick="tempEmps()" value="Temporary"><br>
	</div>	
		<div id="addemp">
			<input type="button"  onclick="hide()" value="Add Employee">
		</div>	
	
		<p id ="para"></p>
		<div id="showtable">
			<div class="grid">
				<table id ="table"></table>
			</div>
		</div>	
		
		
		<div id="showform">
			<div class="forms">
				<form name="inputform" action="#" method="post" >
					<input type="hidden" id="pid" name="Pid" placeholder="Pid" value="1002">
					<input type="hidden" id="tid" name="Tid" placeholder="Tid" value="2002">
					<input type="text" id="name" name="name" placeholder="Name" required >
					<br>
					<input type="text" id="email" name="email" placeholder="E-mail">
					<br>				
					<input type="text" id="dept" name="dept" placeholder="Department" >
					<br>
					<input type="text" id="package" name="package" placeholder="Package" >
					<br>
					<div class="buttons">
						<input type="button" value="Submit" onclick="addRow()" >
						<input type="reset" value="Cancel" onclick="cancel()">
					</div>
				</form>
			</div>

		</div>


<script>
	window.onload = permEmps();
</script>

</body>

CSS

body{
   background-color:#6699ff;
}
header{
  background-color:white;
}
h3 {
  text-align: center;
  
}

table,
th,
td {
  background-color:white;
  border: 1px solid black;
  border-collapse: collapse;
  width: 98.5%;
  margin: 10px;
  padding: 15px;
  text-align: left;
  table-layout : fixed;
}
.grid{
	background:grey;
	float:right;

	margin-top: 10px;
	
}


input[type=text], input[type=email] {

  width: auto;
  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: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}
.buttons1{
		margin-left:40%
	
}
[type="button"]:hover ,[type="reset"]:hover{
    border: 3px solid white;
    
}



.addemp{

	margin:0%;
	float:left;
}

JavaScript

try{
					//th and fv :tf = 1; tv and fh: tf = 2
				var tf = 1;
				var plen;
				var tlen;
				var p = 0;
				var t = 0;
				var pt;
				var permData = [];
				var permHtml = "<tr><th>Id</th><th>Name</th><th>Email</th><th>Dept</th><th>Package</th></tr>";
				
				var tempData = [];
				var tempHtml = "<tr><th>Id</th><th>Name</th><th>Email</th><th>Dept</th><th>Package</th></tr>";
					}catch(err){document.getElementById("para").innerHTML = err.message;}
				
				//*********object**********************
				function employee(name, email, dept, salary){
					this.ename = name;
					this.eemail = email;
					this.edept = dept;
					this.esalary = salary;
				}
				
				//***************addRow*****************
				function addRow(){
					p++;
					try{
					var namevalue = document.getElementById("name").value;
					var emailvalue = document.getElementById("email").value;
					var deptvalue = document.getElementById("dept").value;
					var packagevalue = document.getElementById("package").value;							
					if(namevalue == "" && emailvalue == "" && deptvalue == "" && packagevalue == ""){
						document.getElementById("para").innerHTML = "Please fill all the fields before submitting.";
						
					}
					else{
						document.getElementById("para").innerHTML = "";
						tf = 2;
						hide();
						
						if(pt == 1){
							permAddRow();
						}
						else if(pt == 2){
							tempAddRow();
						}
					}
					
					
					}catch(err){document.getElementById("para").innerHTML = err.message;}
				}  

				//******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(namevalue.value,emailvalue.value,deptvalue.value,packagevalue.value);
					permData.push(genEmployee);
					plen =...