EMPDATABASE

wednesday

by PRAGADEESH S

HTML

<!DOCTYPE html>
<html>
<head>
<script src="empscript.js"></script>
<link rel="stylesheet" type="text/css" href="emp database.css">

<title> Employee Database</title>
<body>
  <header>
    <h3>
EMPLOYEE DATABASE
	</h3>
  </header>
			
			<div class="buttons1">
				<input type="button" onclick="hide()" value="Add Employee">
				<a id="pbutton"><input type="button" onclick="" value="Permanent Employees"></button>
				<a id="tbutton"><input type="button" onclick="tempemp" value="Temporary Employees"></a><br><br>
			</div>
	<div class="grid">
			<table id ="table"></table>
		</div>
		
		
		
		
<div id="hide">
		<div class="forms">
			<form action="#" method="get">
			
			
				<input type="hidden" id="id" name="Id" value="1002">
				Enter Your Name
				<br>
				<input type="text" id="name" name="Name">
				<br> Enter Your E-mail Id
				<br>
				<input type="email"; id="email" name="Email">
				<br> Enter Your Dept
				<br>
				<input type="text" id="dept" name="Dept">
				<br> Enter Your Package
				<br>
				<input type="text" id="package" name="Package">
				<br>
				<br>
				<div class="buttons">
					<input type="button" value="Submit" onclick="addRow()">
					<input type="reset" value="Cancel">
				</div>

			</form>
		</div>
  
</div>
	
	<script type="text/javascript">
				
            
				
				
				
               var data = [1000,"Prag","[email protected]","IT",2000,1001,"Dkay","[email protected]","IT",2500];
			   
				
				var html = "<tr><th>Id</th><th>Name</th><th>E-mail</th><th>Dept</th><th>Package</th></tr>";
				html += "<tr><td>"+data[0]+"</td><td>"+data[1]+"</td><td>"+data[2]+"</td><td>"+data[3]+"</td><td>"+data[4]+"</td></tr>";
				html += "<tr><td>"+data[5]+"</td><td>"+data[6]+"</td><td>"+data[7]+"</td><td>"+data[8]+"</td><td>"+data[9]+"</td></tr>";
				document.getElementById("table").innerHTML = html;
						
				/*function tempemp{
				var data1 = [1000,"Hugh","[email protected]","IT",20020,1001,"Xrow","[email protected]","ITIS",25050];
			    var html =...

CSS

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

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



	
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; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.buttons1{
	display:in-line;
	margin-left:25%;	
	
}
#pbutton:active {
  background: url(button.png) no-repeat bottom;
}